CODEWITHSUNDEEP
htmlcss
Jakub-Wilk
Jakub-Wilk

Reputation: 49

CSS :hover works only on the lower half of the button

The page in question: http://rainbowdoge.000webhostapp.com

The situation: I have two buttons in the nav menu on the left side. The upper one contains a hitbox (black for testing purposes), and an image of a rainbow. The image is changing the opacity on hover. CSS code for that:

.icon {
opacity: 0.6;
backface-visibility: hidden;
transition: opacity 0.3s ease-in-out;
}
.iconHitbox:hover .icon {
opacity: 1;
cursor: pointer;
}

There is also an iframe on the page. The iconHitbox changes the iframe's source on click.

The problem: If I hover over the top half of the button, the opacity doesn't change, as if a hover isn't even detected.

The solution I could think of: I thought that maybe something else is getting in the way, but no, the setSrc() function works when I click on the upper half of the button.

Upvotes: 1

Views: 1120

Answers (3)

Kenpachi
Kenpachi

Reputation: 182

You have absolute set. If you remove absolute then adjust positioning you'll be good.

try:

#mainPageIcon {
    background-color: black;
    position: relative;
    top: 25px;
}

.iconHitbox {
   height: 8vh;
   width: 8vh;
}

Upvotes: 0

sascha10000
sascha10000

Reputation: 1230

The div with the id "test3" is overlapping with your icon. You can see it in the dev tools of your browser.

Upvotes: 0

Adam
Adam

Reputation: 3965

This is happening because your #test1, #test2, and #test3 elements are being positioned half way over the rainbow circle. You'll need to move them out of the way.

Upvotes: 1

Related Questions