Question

我有很多CSS，它让我失望。当我将鼠标悬停在它和子元素上时，我需要一个图像变得不那么透明，但是当图像悬停时，子元素会滑入。我得到了一半的工作，但是当子元素悬停时，图像会返回完全不透明。我无法让选择器正确。这是什么工作现在http://www.fuzionvideos.com/#video_recent

以下是代码：

<ul><li  id="vid_link" class="box 1"><a href="https://www.fuzionvideos.com/video/belt-    truth"><img src="http://www.fuzionvideos.com/images/uploads/SF_BoT.jpg" alt="Belt - Truth">    </a><a href="https://www.fuzionvideos.com/video/belt-truth"><span class="caption description">Armor of the Lord: Belt of Truth</span></a><a href="https://www.fuzionvideos.com/video/belt-truth"><b class="title_line">Belt - Truth</b></a></li></ul>

和CSS：

#vid_display .box {  
    cursor: pointer;  
    height: 199px;  
    overflow: hidden;  
    width: 300px; 
float: left;
position: relative;
}  

#vid_display .box img {   
-webkit-transition: all 300ms ease-out;  
-moz-transition: all 300ms ease-out;  
-o-transition: all 300ms ease-out;  
-ms-transition: all 300ms ease-out;  
transition: all 300ms ease-out;
position: absolute;
left: 0;  
}  
#vid_display .box .caption {  
position: absolute; 
z-index: 100;  
-webkit-transition: all 300ms ease-out;  
-moz-transition: all 300ms ease-out;  
-o-transition: all 300ms ease-out;  
-ms-transition: all 300ms ease-out;  
transition: all 300ms ease-out;
left: 0;    
} 
#vid_display .box .description {  
height: 90px;  
width: 300px;  
display: block;  
bottom: -140px;  
line-height: 25pt;  
text-align: left;
padding-left: 8px;
line-height:normal; 
} 
#vid_display .box:hover .description {  
-moz-transform: translateY(-150%);  
-o-transform: translateY(-150%);  
-webkit-transform: translateY(-150%);  
transform: translateY(-150%);  
} 
#vid_display ul {
padding-left: 0px;
}
#vid_display li{
display: inline;
margin-right: 18px;
}

#vid_display img:hover {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
#vid_display a :hover {
color: #ed1c24;
}
.title_line {
background-color:#ebebeb;
position: absolute;
height: 25px;
width: 300px;
top: 169px;
left: 0;
z-index: 101;
padding-top: 8px;
}

和jsfiddle：http://jsfiddle.net/blalan05/FkV2z/

Answer 1

您正在将opacity应用于悬停的图片。因此，当您悬停在锚点上时，图像不再悬停。尝试为:hover应用.box，因此当您将鼠标悬停在锚点（.box的孩子）上时，.box仍将被视为悬停。改变这个：

#vid_display img:hover {
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

到此：

#vid_display .box:hover img {
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

悬停在子链接上时，父级上的悬停状态会发生变化

1 个答案: