HTML - отображение img только в состоянии: hover навигационной панели - PullRequest
Новая
       40

HTML - отображение img только в состоянии: hover навигационной панели

0 голосов
/ 14 декабря 2018

Я хотел бы знать, возможно ли отображать img на панели навигации только когда: hover активен только на языке html / css.

Я пытаюсь показать этот индикатор под своей панелью навигации, когдая: hover navbar

это мой HTML-код: codeHtml

и это мой CSS: CSS для позиционирования IMG

1 вопрос я могу сделать это без JS?(просто играя с непрозрачностью).Поскольку я попробовал
ul li a img {opacity: 0;}
ul li a img: hover {opacity: 1;}, и это не сработало.

2 Могу ли я снова использовать тот же img для другого элемента navbar с другим значением в css, чтобы изменить положение, возможно, с использованием другого класса?и просто измените размер и значение x - если да, с абсолютным или относительным?

, спасибо вам всем за все, хорошего дня

Ответы [ 3 ]

0 голосов
/ 14 декабря 2018

Конечно, вы можете.Просто скройте изображение в таблице стилей, затем на : наведите пункта меню (li).Покажите изображение снова! 

ul li a img {
  display:none;
}

ul li:hover a img {
  display:inline-block;
}
0 голосов
/ 14 декабря 2018

Это можно легко сделать, просто играя с непрозрачностью 

ul li a img {opacity:0;}

и добавив курсор на элемент списка 

ul li:hover a img {opacity:1;}
0 голосов
/ 14 декабря 2018

только увидев весь код я могу дать прямой ответ.Однако, пробуя этот код: 

    <ul>
    <li><a href="dsad">Home<img src="https://upload.wikimedia.org/wikipedia/en/thumb/6/63/IMG_%28business%29.svg/1200px-IMG_%28business%29.svg.png"></a></li>
    <li>teste</li>
    <li>outro</li>
    <li>Ultimo</li>
</ul>
<style>
    ul li a img:hover{opacity: 1;}
    ul li a img{opacity: 0;}
</style>

, это работает ...

Вы хотите поместить изображение в абсолютную позицию, учитывая положение его родителя (li), верно?Если это так, я не устанавливаю (li) с положением: относительным и img с абсолютным?Таким образом, абсолютная позиция img будет через его родителя (li) не из всего документа.

В опубликованном вами CSS у вас непрозрачность: 0,9.Так вероятно это является причиной.Попробуйте поставить непрозрачность: 0;а в другой строке - ul li: hover img {opacity: 1! важный}

О вопросе 2, конечно.Но, возможно, рассмотрите возможность установки имени класса для каждой навигационной панели

...