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

【问题标题】：Change list of images opacity on hover - css更改悬停时的图像不透明度列表 - css
【发布时间】：2017-07-13 15:40:11
【问题描述】：

我的 HTML 是：

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

    </li>
<ul>

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

谢谢

【问题讨论】：

标签： css hover opacity

【解决方案1】：

使用 CSS 悬停。

ul {
  opacity: 0.5;
}

ul:hover {
  opacity: 1
}

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

【讨论】：

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

thx 如何通过默认事件将图像之一设置为 opacity 1 ul 是 opacity 0.5 。以点击后的活动图像为例
只需将:hover 更改为:active 即可。如需更多列表，请转到here

【解决方案4】：

给 div box-hover 一个类

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

【讨论】：

问题中没有提到jQuery，但你已经使用它了。

【解决方案5】：

你可以改变这个，因为 img 是 ul 的孩子，所以试试这个

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

ul:hover img {
opacity : 1;
}

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

【讨论】：