Эффект при наведении на изображение

Я думаю, что мои классы или удостоверения личности испорчены, когда я пытаюсь вызвать это.

CSS:

image#ply : hover .ply-text {
    visibility: visible;
}

HTML:

<image id="ply" style="height: 50px; padding:5px;" src="images.png">
        <div class="ply-text">
            <p>Click for more info!</p>
        </div>

Всего 2 ответа


Сначала о некоторых проблемах:

  • Элемент HTML для встраивания изображений называется img .
  • Модель содержимого элемента img пуста , то есть может не иметь дочерних элементов.
  • Даже если бы это не было проблемой, вы бы не увидели нужного эффекта, так как текст уже виден в начале.

Учитывая это, вот возможное решение:

.ply-text {
    visibility: hidden;
}

#ply:hover ~ .ply-text {
    visibility: visible;
}

~ Является родственным селектором, который позволяет ссылаться на элемент, следующий за другим.


Изображения используют <img> (не «изображение») - это важно отметить (так как он еще не прокомментирован). Как уже отмечалось, вы должны удалить пробел между id и :hover в вашем css.

Я бы посоветовал вам удалить встроенный стиль и использовать css или, по крайней мере, добавить его в свой стиль id / добавить дополнительные атрибуты в качестве класса в заголовке тела (css лучше!).

В стиле вам не нужно image / img перед определением вашего идентификатора, вы можете просто оставить #ply{your style} самостоятельно.

Если вы хотите отобразить картинку при наведении, я бы использовал display: block / none. Видимость просто показывает это, если оно скрыто. (Я сделал это во фрагменте, запустите и посмотрите, если это желаемый эффект). Также используйте alt tag! Я добавил один. Если вы хотите показать / скрыть текст, вы можете использовать любой из них, но сначала вы должны установить видимость скрытым или не отображать ничего ... Я добавил для этого класс для ply-text.

Так что ваш код будет читать

#ply {
  height: 50px;
  padding: 5px;
}
.ply-text{
   display:none; /* or visibility:hidden*/
}
#ply:hover +.ply-text{
   display:block; /* or visibility:visible*/
}
<img id="ply" src="images.png" alt="plyimage">
<div class="ply-text">
  <p>Click for more info!</p>
</div>

Надеюсь это поможет


Есть идеи?

10000