Изменить список изображений непрозрачности на парении - CSS

Question

Моего HTML является:

<ul> 
    <li> 
     <div> 
      <img> 
     </div> 
    </li> 
    <li> 
    <div> 
      <img> 
     </div> 
    </li> 
    <li> 
     <div> 
      <img> 
     </div> 

    </li> 
<ul> 

во время наведения ul Я хотел бы, что все изображения будет с непрозрачностью 1 и мышиным отпуском вернуться непрозрачность 0,5

thx

Answer 1

Используйте свойство hover на целевом элементе и эффект opacity на затронутый элемент.

ul img { 
 
    opacity: 0.5; 
 
    transition: 0.3s ease-in-out; 
 
} 
 

 
ul:hover img { 
 
    opacity: 1; 
 
}

<ul> 
 
    <li> 
 
    <div> 
 
     <img src="https://www.w3schools.com/tags/smiley.gif" /> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div> 
 
     <img src="https://www.w3schools.com/tags/smiley.gif" /> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div> 
 
     <img src="https://www.w3schools.com/tags/smiley.gif" /> 
 
    </div> 
 

 
    </li> 
 
    <ul>

Answer 2

Используйте css hover.

ul { 
    opacity: 0.5; 
} 

ul:hover { 
    opacity: 1 
} 

В JavaScript, вам нужно обработчик события mouseenter и mouseleave

Answer 3

Вы можете увидеть здесь работать

ul { 
 
    opacity: 0.5; 
 
    filter: alpha(opacity=50); /* For IE8 and earlier */ 
 
} 
 

 
ul:hover { 
 
    opacity: 1.0; 
 
    filter: alpha(opacity=100); /* For IE8 and earlier */ 
 
}

<ul> 
 
    <li> 
 
     <div> 
 
      <img src="https://www.w3schools.com/csS/img_forest.jpg" alt="Forest" width="170" height="100"> 
 
     </div> 
 
    </li> 
 
    <li> 
 
    <div> 
 
      <img src="https://www.w3schools.com/csS/img_mountains.jpg" alt="Mountains" width="170" height="100"> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
      <img src="https://www.w3schools.com/csS/img_fjords.jpg" alt="Fjords" width="170" height="100">

Более подробную информацию в W3Schools

Answer 4

дать класс для сНа коробчатого парить

$("li").hover(function() { 
$(this).find('.box-hover').fadeIn(100); }, 
function() { $(this).find('.box-hover').fadeOut(100); 
}); 

Answer 5

вы можете изменить это, потому что IMG является дочерним ул поэтому попробуйте эти

ul img { 
opacity: 0.5; 
transition: 250ms all ease-in-out; // transition for better looks 
} 

ul:hover img { 
opacity : 1; 
} 

You может изменить время перехода от 250 мс до более более плавного, но медленнее анимация затухания и затухания будет