Fancybox navigation arrows and close button do not have transparent hover

问题

Using fancybox 2.1.5 in wordpress, when I hover over the left or right side of the pic, I always get a grey overlay instead of the regular transparent one.

Can someone take a look, what has gone wrong?

http://homesweet.homelinux.org/wordpress/index.php/2013/09/06/mindennapok-25/ (just click any of the pics)

回答1:

Normally it's not a good idea to set css rules to global elements but use specificity instead.

You have this css rule in the line 62 of your style.css file :

a {
    color: #DCDAD5;
    text-decoration: none;
}

That rule affects to all <a> anchors, including fancybox (nav arrows) anchors.

Try changing it into something like

a.myclass {
    color: #DCDAD5;
    text-decoration: none;
}

or target the parent like

#parent a {
    color: #DCDAD5;
    text-decoration: none;
}

so it will only affect to the elements it should.

来源：https://stackoverflow.com/questions/18689751/fancybox-navigation-arrows-and-close-button-do-not-have-transparent-hover