Question

I have anchors with text in them set to 0 opacity and positioned absolutely above images. I want them to partially show on hover with 0.6 opacity with a background color.

In IE 7, the background is non-clickable. I have to hover where the text should be for it to show. The background color does fill the whole anchor which has a fixed width and height.

I tried zoom: 1, but IE7 still says haslayout: -1

a {
    color: #FFF;
    width: 250px;
    height: 113px;
    padding: 30px 15px;
    position: absolute;
    top: 0px;
    left: 0px;
    text-decoration: none;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}

It seems as if the whole anchor is clickable once the text has been hovered over. If my mouse leaves the anchor and hovers over just its background, it won't work.

Was it helpful?

Solution 2

Nevermind. Solved it. Anchor needed background color for background to be clickable.

OTHER TIPS

There is missing

  display: block;

If you do not want to make it block, then width and height makes no sense.

in your code. You can also try to add

 z-index: 10;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top