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

你可以看到它在这里工作

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

W3Schools

中的更多信息

Answer 4

为div box-hover提供课程

  $( "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

5 个答案: