使用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();
}