Question

基本上我希望可以将鼠标悬停在图像上，这会导致出现两个以上的图像（它们会将不透明度从0更改为1）。但由于某种原因它不起作用。有可能没有jquery，所以请尝试用css / html帮助我。

HTML：

 <a href="#">
<img src="gaspari/portret.jpg" width="300px;" height="300px;">
</a>
<img class="prikaz" src="gaspari/slike.jpg"   width="300px;"height="300px;">
<img class="prikaz" src="gaspari/kip.jpg" width="300px;" height="300px;">

CSS：

 .prikaz {
  opacity: 0;
  transition: opacity 0.9s linear;
  }
  a:hover .prikaz {
  opacity: 1;
  display: inline-block;
 }

Answer 1

a:hover .prikaz是后代选择器，而a:hover ~ .prikaz是一般的兄弟选择器。

 .prikaz {
  opacity: 0;
  transition: opacity 0.9s linear;
  }
  a:hover ~ .prikaz {
  opacity: 1;
  display: inline-block;
 }
 img{
  width:100px;
  height:100px;
  object-fit:cover;
 }

<a href="#">
<img src="https://www.thetelugufilmnagar.com/wp-content/uploads/2016/11/Samantha.jpg" width="300px;" height="300px;">
</a>
<img class="prikaz" src="http://tollypop.com/wp-content/uploads/2016/10/Arthana-4-683x1024.jpg"   width="300px;"height="300px;">
<img class="prikaz" src="http://www.gulte.com/content/2012/04/news/Hot-Tamannah-practical-outlook-on-Heroines---1018.jpg" width="300px;" height="300px;">

Answer 2

a:hover .prikaz将选择类prikaz的任何元素，该类是<a>的后代，其示例为零。您想使用general sibling selector代替~。

 a:hover ~ .prikaz {
   opacity: 1;
   display: inline-block;
 }

＆＃13;

 .prikaz {
   opacity: 0;
   transition: opacity 0.9s linear;
 }
 
 a:hover ~ .prikaz {
   opacity: 1;
   display: inline-block;
 }

＆＃13;

<a href="#">
  <img src="http://www.placehold.it/300x300" width="300px;" height="300px;">
</a>
<img class="prikaz" src="http://www.placehold.it/300x300" width="300px;" height="300px;">
<img class="prikaz" src="http://www.placehold.it/300x300" width="300px;" height="300px;">

＆＃13;

当我将鼠标悬停在元素上时，图片不会改变不透明度：悬停

2 个答案: