CODEWITHSUNDEEP
htmlcsshovercss-positionabsolute
Cray
Cray

Reputation: 5493

Hover in background doesn't work with position absolute over it

I've a container on which I use an hover state. Everytime I hover over it, the background changes to a different color.

In addition I use a navigation which I display with postion: absolute over the container. Everytime I hover over the navigation, the background change doesn't work because I'm not over the container in the background.

Is there any workaround for that?

My code (hover over the 1):

.wrapper {position: relative;}
.container {background: red; width: 100%; height:200px;}
.container:hover {background: blue;}
.nav {position:absolute; top:50%;margin: 0 auto; width:100%; text-align:center;}
<div class="wrapper">
  <div class="container">
  
  </div>
  <div  class="nav">
    <a href="#">1</a>
  </div>
</div>

Upvotes: 1

Views: 434

Answers (2)

theblindprophet
theblindprophet

Reputation: 7937

Move the navigation bar inside the container:

<div class="wrapper">
    <div class="container">
        <div  class="nav">
            <a href="#">1</a>
        </div>
    </div>
</div>

It's position: absolute so inside or outside isn't an issue.

Or use javascript:

<div class="wrapper">
    <div class="container" onmouseover="change()" onmouseout="changeBack()">

    </div>
    <div  class="nav" onmouseover="change()">
        <a href="#">1</a>
    </div>
</div>

<script>
    window.change = function() {
        console.log("hello");
        document.getElementsByClassName("container")[1].style.background = "blue";
    }

    window.changeBack = function() {
        console.log("hello");
        document.getElementsByClassName("container")[1].style.background = "red";
    }
</script>

Fiddle: https://jsfiddle.net/3h1orsmu/1/

Upvotes: 2

Andrew Birks
Andrew Birks

Reputation: 890

Use the wrapper's hover state, but target the container:

.wrapper:hover .container{
    background-color:blue;
}

Upvotes: 2

Related Questions