悬停时更改图像不透明度列表 - css

Question

我的HTML是：

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

    </li>
<ul>

将鼠标悬停在 ul 上时，我希望所有图像的不透明度都为 1，鼠标离开时 return 不透明度为 0.5

感谢

Answer 1

使用css悬停。

ul {
  opacity: 0.5;
}

ul:hover {
  opacity: 1
}

在 javascript 中，您需要事件处理程序 mouseenter 和 mouseleave

Answer 2

你可以看到它在这里工作

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 3

在目标元素上使用 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 4

为 div box-hover

提供 class

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

Answer 5

您可以更改它，因为 img 是 ul 的子级，所以试试这个

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

ul:hover img {
opacity : 1;
}

您可以将过渡时间从 250 毫秒更改为更平滑但淡入和淡出动画更慢的值

悬停时更改图像不透明度列表 - css

Change list of images opacity on hover - css

css

hover

opacity