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

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>的后代，您的示例为零。您希望改用常规同级选择器，~ .

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

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

<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;">