Появление текста при наведении мыши

@Pavel Rem · Регистрация: 15.07.2016

Author24 — интернет-сервис помощи студентам

Пытаюсь сделать миниатюры для bootstrap карусели.
При наведении мыши картинка должна затемнится и проявится текст.
Картинка выступает в роли ссылки, она переключает слайды при клике.
Проблема: текст который появляется - кликабельный. Это значит, если мышкой попасть в область текста, событие клика по ссылке не происходит и слайдер не переключается.

Как сделать так, чтобы текст был не кликабельный, и вся область картинки являлась кнопкой?

HTML5

 <div class="mini">
            <p>Absolute men Dashwood landlord</p>
            <img data-target="#Slider2" data-slide-to="0" src="http://www.sunhome.ru/i/cards/39/prazdnik-den-zemli-kartinka.orig.jpg">
        </div>

CSS

.mini{
    height: 230px;
    width: 228px;
    color: transparent;
}
.mini img{
    height: 230px;
    width: 228px;
}
.mini p{
    text-align: center;
    position: absolute;
    width: 170px;
    margin-top: 50px;
    margin-left: 28px;
    font-size: 26px;
}
.mini:hover{
    color: #fff;
    text-shadow: 1px 1px 2px black;
    background-color: #000;
    opacity: 0.8;
    box-shadow: 0px 7px 26px 9px rgba(0,0,0,0.87);
    cursor:pointer;
}

@cyb0rg_01 · 19.04.2017, 08:56

Сообщение от Pavel Rem

Как сделать так, чтобы текст был не кликабельный, и вся область картинки являлась кнопкой?

CSS

1	pointer-events: none;

HTML5

<div class="mini">
            <p>Absolute men Dashwood landlord</p>
            <img data-target="#Slider2" data-slide-to="0" src="http://www.sunhome.ru/i/cards/39/prazdnik-den-zemli-kartinka.orig.jpg">
        </div>

CSS

.mini{
    height: 230px;
    width: 228px;
    color: transparent;
}
.mini img{
    height: 230px;
    width: 228px;
}
.mini p{
    text-align: center;
    position: absolute;
    width: 170px;
    margin-top: 50px;
    margin-left: 28px;
    font-size: 26px;
    pointer-events: none;
}
.mini:hover{
    color: #fff;
    text-shadow: 1px 1px 2px black;
    background-color: #000;
    opacity: 0.8;
    box-shadow: 0px 7px 26px 9px rgba(0,0,0,0.87);
    cursor:pointer;
}

https://jsfiddle.net/phd211vk/1/

@Pavel Rem · 19.04.2017, 14:23 **[ТС]**

Спасибо!

Новые блоги и статьи
Как написать микросервис на Go/Golang InfoMaster 14.01.2025 Определение микросервиса, преимущества использования Go/ Golang Микросервис – это архитектурный подход к разработке программного обеспечения, при котором приложение состоит из небольших, независимо. . .	Как написать микросервис с нуля на C# InfoMaster 14.01.2025 В современном мире разработки программного обеспечения микросервисная архитектура стала стандартом де-факто для создания масштабируемых и гибких приложений. Этот архитектурный подход предполагает. . .	Как создать интернет-магазин на PHP и JavaScript InfoMaster 14.01.2025 В современном мире электронная коммерция стала неотъемлемой частью бизнеса. Создание собственного интернет-магазина открывает широкие возможности для предпринимателей, позволяя достичь большей. . .	Как написать Тетрис на Ассемблере InfoMaster 14.01.2025 Тетрис – одна из самых узнаваемых и популярных компьютерных игр, созданная в 1984 году советским программистом Алексеем Пажитновым. За прошедшие десятилетия она завоевала симпатии миллионы людей по. . .	Как создать игру "Танчики" на Unity3d и C# InfoMaster 14.01.2025 Разработка игр – это увлекательный процесс, сочетающий в себе творчество и технические навыки. В этой статье мы рассмотрим создание классической игры "Танчики" с использованием Unity3D и языка. . .	Организую платный онлайн микро-курс по доработке Android-клиента Telegram _Ivana 14.01.2025 Официальная версия и распространенные форки не полностью устраивают? Сделай свою кастомную версию клиента! 4 занятия по 2 часа (2 недели пн, ср 19:00-21:00 по Москве). Первое вводное занятие. . .
Как создать приложение для фитнеса для iOS/iPhone на Kotlin InfoMaster 14.01.2025 Создание собственного фитнес-приложения — это не только захватывающий, но и полезный процесс, ведь оно может стать вашим верным помощником на пути к здоровому и активному образу жизни. В современных. . .	Как создать приложение магазина для iOS/iPhone на Swift InfoMaster 14.01.2025 Введение в разработку iOS-приложений Разработка приложений для iPhone и других устройств на базе iOS открывает огромные возможности для создания инновационных мобильных решений. В данной статье мы. . .	Это работает. Скорость асинхронной логики велика. Вопрос видимо останется в стабильности. Плата - огонь! Hrethgir 13.01.2025 По прошлому проекту в Logisim Evolution https:/ / www. cyberforum. ru/ blogs/ 223907/ blog8781. html прилагаю файл архива проекта в Gowin Eda. Восьмибитный счётчик из сумматора+ генератор сигнала. . .	UserScript для подсветки кнопок языков программирования в зависимости от текущего раздела volvo 13.01.2025 В результате работы этого скрипта подсвечиваются нужные кнопки не только в форме быстрого ответа, но и при редактировании сообщения: / / ==UserScript== / / @name CF_DefaultLangSelect / / . . .	Введение в модели и алгоритмы машинного обучения InfoMaster 12.01.2025 Машинное обучение представляет собой одну из наиболее динамично развивающихся областей искусственного интеллекта, которая фокусируется на разработке алгоритмов и методов, позволяющих компьютерам. . .	Как на Python создать нейросеть для решения задач InfoMaster 12.01.2025 В контексте стремительного развития современных технологий особое внимание уделяется таким инструментам, как нейросети. Эти структуры, вдохновленные биологическими нейронными сетями, используются для. . .

@Pavel Rem 11 / 11 / 2 Регистрация: 15.07.2016 Сообщений: 132
	19.04.2017, 14:23 [ТС]	3
	Спасибо! 0