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