使用JavaScript隐藏基于CSS条件的文本

Question

有没有一种方法可以使用JavaScript的if语句隐藏基于其他CSS样式的CSS元素？ 我正在SharePoint中工作，并且正在将一些CSS代码应用于图像中带有背景文本的图像。 该图像具有悬停/动画效果，当悬停效果开始时，我想隐藏文本和背景。 类似于if(image3.opacity="1") then(h2, h2 span, h2 span.spacer)=hide 。 我是javascript的新手，非常感谢您的帮助！

我到目前为止制作的CSScode是下一个：

#image3 {
opacity: 0.4;
filter: alpha(opacity=40);
box-shadow: 0px 0px 15px grey;
alt: missing;
    transition-property: opacity;
    transition-duration: .2s;
}
#image3:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); 
}
.image { 
   position: relative; 
   width: 100%;
}
h2 { 
   position: absolute; 
   bottom: 50px; 
   left: 5px; 
   width: 100%; 
}
 h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: 0px;  
   background: rgb(0, 0, 0);
   background: rgba(0, 0, 0, 0.6);
   padding: 9px; 
}
h2 span.spacer {
   padding:0 5px;
   background: rgba(0, 0, 0, 0);
}

Answer 1

您可以只使用CSS，具体取决于元素在DOM中的排列方式。 假设h2是#image3的同级兄弟：

#image3:hover + h2,
#image3:hover + h2 span,
#image3:hover + h2 span.spacer {
    display: none;
}

如果您希望元素淡出而不是消失，则可以使用不透明度和过渡：

#image3 + h2,
#image3 + h2 span,
#image3 + h2 span.spacer {
    opacity: 1;
    transition: opacity 150ms ease 1s; /* 1s delay */
}

#image3:hover + h2,
#image3:hover + h2 span,
#image3:hover + h2 span.spacer {
    opacity: 0;
}

Answer 2

如果您能够掌握并附加JQuery库，则应该可以进行以下操作。

if ($("#image3").css("opacity") == "1") {
    $("h2").hide();
    $("h2 span").hide();
    $("h2 span.spacer").hide();
}