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

Question

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

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>

Answer 1

Сначала возникают некоторые проблемы:

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

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

.ply-text {
    visibility: hidden;
}

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

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

Answer 2

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

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

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

Если вы хотите отобразить пи c при наведении, я бы использовал 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>

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