更改列表 - CSS

我的HTML是：更改列表 - CSS

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

    </li> 
<ul>

而懸停ul我想，所有的圖像將不透明度1和鼠標離開返回不透明0.5

thx

來源

2017-02-23 Scopi

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

來源

2017-02-23 08:58:49 Hewlett

thx 如何通過defualt事件使圖像不透明度爲1：ul爲不透明度0.5。點擊 – Scopi

後，只需將'：hover'改爲'：active'即可。有關更多列表，請轉到[這裏]（https://www.w3schools.com/css/css_pseudo_classes.asp） – Hewlett

使用CSS懸停。

ul { 
    opacity: 0.5; 
} 

ul:hover { 
    opacity: 1 
}

在JavaScript中，你需要的事件處理程序mouseenter和mouseleave

來源

2017-02-23 08:56:47

你可以看到它在這裏工作

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

來源

2017-02-23 08:57:10 greuze

給出的div一類箱懸停

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

來源

2017-02-23 09:00:28

問題中沒有提及jQuery，但您已經使用它。 –

你可以改變這一點，因爲IMG是UL的孩子這麼試試這個

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

ul:hover img { 
opacity : 1; 
}

你可以將轉換時間從250毫秒更改爲更平滑的轉換時間較慢的淡入和淡出動畫將是

來源

2017-02-23 09:46:17 vkubre

更改列表 - CSS

回答

相關問題