CODEWITHSUNDEEP
htmlcss
atonbrian16
atonbrian16

Reputation: 45

Hover issue on webkit browsers

I am having trouble with fixing an issue with CSS hover on webkit browsers. The code is somewhat like this..

#working .info{
    cursor: pointer;
    width: 19px;
    height: 21px;
    opacity: 0.5;
    position: absolute;
}
#working .info:hover {
    opacity: 1;
}

#working .info:hover + .infoTip, {
    filter: alpha(opacity=100);
    opacity: 100;
}

The issue is only with webkit browsers.

Upvotes: 0

Views: 97

Answers (2)

Razz
Razz

Reputation: 4005

You have a comma in the end of .infoTip that probably ruining it, and opacity: 100 isnt right, try this instead.

#working .info:hover + .infoTip {
    filter: alpha(opacity=100);
    opacity: 1;
}

Edit after OPs update:

Chrome somehow bugs out when rendering opacity: 0 again. But it will work if you use display: none; instead.

.infoTip{
  display: none;
}

#working .info:hover + .infoTip{
  display: block;
}

Upvotes: 3

Love Trivedi
Love Trivedi

Reputation: 4046

Try This CsS

enter code here
    #working .info{
    cursor: pointer;
    width: 19px;
    height: 21px;
    opacity: 0.5;
    position: absolute;
    filter: alpha(opacity=50);
}
#working .info:hover
{
    opacity: 1;
}

#working .info:hover + .infoTip, {
    filter: alpha(opacity=100);
    opacity: 1;
}

Upvotes: 0

Related Questions