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中的排列方式。假设此处def action(node): do_whatever_must_be_done_with(node) iterate_safe(parse_me, action, 'blah blah blah {} in node {}') iterate_safe(parse_me, other_action, 'spam ham {} in node {}')是h2：

的兄弟

#image3

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

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

Answer 2

如果您能够获取并附加JQuery库，则以下内容应该有效。

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

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

2 个答案: