Css 将鼠标悬停在子链接上时，父链接上的悬停状态会发生变化

我有很多CSS，这让我很反感。当我将鼠标悬停在一个图像和一个子元素上时，我需要一个图像变得不那么不透明，但当鼠标悬停在图像上时，子元素会滑入。我得到了它的一半工作，但图像返回到完全不透明时，子元素悬停。我选错了。这就是现在的工作方式

代码如下：

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

---

在JSFIDLE上：

您正在对悬停的图像应用

不透明度。因此，当您悬停在锚点上时，图像不再悬停。尝试为
.box
应用
：hover
，因此当您将鼠标悬停在锚点上（锚点是
.box
的子对象）时，
.box
仍将被视为已悬停。
更改此项：

#视频显示图像：悬停{
不透明度：0.4；
过滤器：alpha（不透明度=40）；/*适用于IE8及更早版本*/
}

为此：

#视频显示框：悬停img{
不透明度：0.4；
过滤器：alpha（不透明度=40）；/*适用于IE8及更早版本*/
}

#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;
}