CODEWITHSUNDEEP
css
Graeme Ford
Graeme Ford

Reputation: 196

CSS hover triggers for other elements not working correctly

I am currently working on a website for a client and I would like to create a hover effect where a 80% transparent block with writing shows up whenever the mouse cursor hovers of focuses on a wide (almost full screen) banner image. (For interest sake in case this affects it, I am using Bootstrap).

The html layout is as follows:

<div class="row" id="Active_Pureness_Wrapper">
        <div id="Active_Pureness_Banner">
            <img class="img-responsive" src="assets/Active_Pureness/Active_Pureness_Banner.jpg">
        </div>
        <div id="Active_Pureness_Overlay">
            <p id="Active_Pureness_Overlay_Title">Active Pureness</p>
        </div>
</div>

To make the hover effect I have tried using the following style of CSS code:

#Active_Pureness_Banner {
position: relative;
display: inline-block;
}
#Active_Pureness_Overlay {
position: absolute;
left: 20px;
top: 0px;
text-align: center;
width: 40vw;
height: 95%;
color: transparent;
}
#Active_Pureness_Overlay_Title {
font-family: 'Nobile', sans-serif;
font-weight: 700;
font-size-adjust: auto;
position: relative;
top: 0px;
background-color: transparent;
color: transparent;
height: 95%;
padding-top: 17%;
}
#Active_Pureness_Wrapper:hover,
#Active_Pureness_Wrapper:focus,
#Active_Pureness_Wrapper:active + #Active_Pureness_Overlay {
color: black;
background-color: rgba(155,175,195,0.8);
}

I Have also tried the following CSS for the hover transition:

#Active_Pureness_Wrapper:hover + #Active_Pureness_Overlay ,
#Active_Pureness_Wrapper:focus + #Active_Pureness_Overlay ,
#Active_Pureness_Wrapper:active + #Active_Pureness_Overlay {
color: black;
background-color: rgba(155,175,195,0.8);
}

Unfortunately, It does not seem to read it right. When I test the effect in-browser, it applies the effect to the base #Active_Pureness_Wrapper instead of targeting the sibling element #Active_Pureness_Overlay? I have also tried using different relationship selectors such as ~ but nothing is working. Am I using this CSS markup correctly or doing something wrong here?

Upon investigation, when I split up the lines into separate CSS commands, none of them register. The problem seems to be with the second half of the Trigger, + #Active_Pureness_Overlay.

Upvotes: 3

Views: 42

Answers (2)

Bruno Poeta
Bruno Poeta

Reputation: 521

This will not work because you are applying the hover to the parent element #Active_Pureness_Wrapper and he's not finding any sibling with the ID #Active_Pureness_Overlay.

Change to #Active_Pureness_Wrapper:hover > #Active_Pureness_Overlay or change the element that's being affected by the hover like this:

#Active_Pureness_Banner:hover + #Active_Pureness_Overlay

Upvotes: 0

Shadow Fiend
Shadow Fiend

Reputation: 1829

You've got wrong selector.. + will select the element that is placed immediately after the div..

So use >. It will select all elements whose parents is the #Active_Pureness_Wrapper..

#Active_Pureness_Banner {
  position: relative;
  display: inline-block;
  
}

#Active_Pureness_Overlay {
  position: absolute;
  left: 20px;
  top: 0px;
  text-align: center;
  width: 40vw;
  height: 95%;
  color: transparent;
}

#Active_Pureness_Overlay_Title {
  font-family: 'Nobile', sans-serif;
  font-weight: 700;
  font-size-adjust: auto;
  position: relative;
  top: 0px;
  background-color: transparent;
  color: transparent;
  height: 95%;
  padding-top: 17%;
}

#Active_Pureness_Wrapper:hover > #Active_Pureness_Overlay,
#Active_Pureness_Wrapper:focus > #Active_Pureness_Overlay,
#Active_Pureness_Wrapper:active > #Active_Pureness_Overlay {
  color: black;
  background-color: rgba(155, 175, 195, 0.8);
}
  Hover Here
<div class="row" id="Active_Pureness_Wrapper">
  <div id="Active_Pureness_Banner">
    
    <img class="img-responsive" src="assets/Active_Pureness/Active_Pureness_Banner.jpg">
  </div>
  <div id="Active_Pureness_Overlay">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <p id="Active_Pureness_Overlay_Title">Active Pureness</p>
  </div>
</div>

Upvotes: 1

Related Questions