Использование «наведения» на «меню», чтобы показать изображение внутри «div» - PullRequest
Новая
       39

Использование «наведения» на «меню», чтобы показать изображение внутри «div»

0 голосов
/ 02 апреля 2019

Мне нужно использовать мышь для наведения меню, чтобы изображение отображалось внутри DIV ниже. 

ul li a:hover {
  background: #43FD49;
}

div#firefox {
  align: center;
  background-position: 50% 50%;
  width: 50%;
  height: 50%;
  position: relative;
  background-color: white;
  margin-top: 25%;
  margin-left: 25%;
  background-image: url(img1.jpg);
  display: none;
}

ul li a#imgfirefox:hover+div#firefox {
  display: block;
}
<ul>
  <li><a href="#">algo</a></li>
  <li><a href="#">Inicio</a></li>
  <li><a id="imgfirefox" href="#">Firefox</a></li>
  <li><a href="#">Chrome</a></li>
  <li><a href="#">Opera</a></li>
</ul>

<div>
  <div id="firefox"></div>
</div>

Я ожидаю навести курсор на «Firefox», и изображение браузера Firefox появится ниже, внутри div.Теперь, когда вы наводите курсор мыши на «Firefox», он ничего не делает.

Ответы [ 3 ]

0 голосов
/ 02 апреля 2019

Рассмотрите подход JavaScript или сделайте следующее: 

#firefox:hover{
    background-image: url('img1.jpg');
}
0 голосов
/ 02 апреля 2019

Вам нужно изменить структуру HTML 

ul li a:hover {
  background: #43FD49;
}

#firefox {
  width: 50px;
  height: 50px;
  background-color: yellow;
  display: none;
}

#imgfirefox:hover ~ #firefox {
  display: block;
}
<ul>
  <li><a href="#">algo</a></li>
  <li><a href="#">Inicio</a></li>
  <li id="imgfirefox" ><a href="#">Firefox</a></li>
  <li><a href="#">Chrome</a></li>
  <li><a href="#">Opera</a></li>
  
  <div id="firefox"></div>
</ul>
0 голосов
/ 02 апреля 2019

Использование: 

<li><a id="imgfirefox" href="#">Firefox</a><img src="ff.jpg"></li>

И использовать CSS как, 

div#firefox img{display:none}

div#firefox img:hover{display:block}

вместо использования фонового изображения.

PS: Также вы должны использовать background-image: url("img1.jpg");, с кавычками

...