Hide text based on CSS conditionals with JavaScript

Question

Is there a way to use the if statement of JavaScript to hide CSS elements based on other CSS styles? I'm working in SharePoint and I'm applying some CSS codes to an image I have with some text with background in top of it. This image has a hover/animation effect and I would like to hide the text and background when the hover effect begins. Something like if(image3.opacity="1") then(h2, h2 span, h2 span.spacer)=hide. I'm a total newbie in javascript, so I would really appreciate your help!

the CSScode I've made so far is the next one:

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

I think it is not a good idea to use styling as a part of business logic. I would suggest to add some kind of event handler. For example, add "onmouseover" handler for the image in your script and add logic to hide/show additional content or something else. — Viktor Kireev
– Viktor Kireev, Commented May 5, 2015 at 14:36

chazsolo · Accepted Answer · 2015-05-05 14:41:56Z

2

You could use just CSS, depending on how your elements are arranged in the DOM. Assuming here that the h2 is a sibling of #image3:

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

If you want the elements to fade out instead of just disappear, you could use opacity and transition:

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

answered May 5, 2015 at 14:41

chazsolo

8,6541 gold badge25 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Callum. · Accepted Answer · 2015-05-05 14:31:48Z

0

If you are able to get a hold of and attach the JQuery library, the following should work.

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

answered May 5, 2015 at 14:31

Callum.

1461 silver badge12 bronze badges

Collectives™ on Stack Overflow

Hide text based on CSS conditionals with JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related