Question

I have two classes with the following code-

<div class="arrow-left"> <h1> < </h1> </div>
<div class="arrow-right"><h1> > </h1> </div>

Their style –

.arrow-left{
position: fixed;
top:40%;
left:10%;
vertical-align: middle;
height:80%;width:5%;
text-align: center;
}
.arrow-right{
position: fixed;
top:40%;
right:10%;
vertical-align: middle;
height:80%;width:5%;
text-align: center;
}
.arrow-left:hover, .arrow-right:hover{
background-color: #4EB30B;
cursor:pointer;
}

They are used for navigational purposes.
When I hover over the .arrow-left, it’s background doesn’t change, but the .arrow-right one’s background changes when I hover over it.
And once I’ve clicked on .arrow-right , and I hover over over .arrow-left, it’s background changes!
This is happening in Chrome on Ubuntu.

Here is the webpage
I want to know why this happens but no workaround needed.

Answer 1

this is caused by the positioning of the arrows, in your example-link the left-arrow hover is working when mouse is about 150px below the left arrow, you should give it a width and height in px so the hover acts only when you are really hovering the box

additional, the div.b-wrap is over the left arrow box use the property z-index