Find Questions…

Close ×
First time here? Check out the FAQ!

CSS a:hover doesn't work as expected in confluence

Richard Smith asked this question · 6 karma ·

I'm creating a video gallery in Confluence. I'd like to show a "play" button when a user hovers over the speaker's picture.

This exact bit of code works when I serve the page from apache; but when I try to do the same thing in a confluence page (the body wrapped in {html} macros , the backgroud image dissappears entirely.

<html>
<body>
<style>
a.playlink { position:relative; }

a.playlink:hover div.hoverbox {
background-image: url(http://cdn-0.nflximg.com/en_US/buttons/player-add.png);
background-position: center;
background-repeat: no-repeat;
}

a.playlink:hover div.hoverbox img.speaker {
position:relative;
z-index: -1;
}
</style>

<div style="width:120px; border:1px solid black;">
<a class="playlink" title="Test" href="#">
<div class="hoverbox">
<img class="speaker" src="http://media02.linkedin.com/mpr/mpr/shrink_100_100/p/3/000/093/283/1c8b17a.jpg"
alt="" width="120" height="120" />
</div>
</a>
</div>
</body>
</html>

If it's not obvious, I'm a CSS amateur, so I'm grateful for any assistance you can provide; even if it's a "you're doing it wrong, noob!" tough love beatdown. :-)

1007 views

2 Answers:

Richard Smith · 6 karma ·

Yes, I know... only idiots answer their own questions, but I figured it out. Since my z-index was -1, I figured that somewhere some element was explicitly setting background color to white.

Various selectors for paretn elements (a whole bunch of them) explicitly set background color to white. div#main, div#content, body, div#full-height-container, etc.

David Simpson · 16,745 karma ·

Richard,

Have you tried using the Firebug add-on for Firefox (or similar)? It will allow you to debug your CSS rules and see which rule in Confluence's CSS is overriding your rule(s).

If you want to try the sledgehammer approach, try prepending #com-atlassian-confluence to all the rules that are being overriden. It might just work :)

Richard Smith · 6 karma ·

I do use chrome's built-in debugging tools, and as far as I can tell, it's the same selector getting matched.

And to be clear, my hover image is displaying in confluence, the problem is that the image it's supposed to be hovering over dissappears. :(

For example, served from apache, chrome shows:

Matched CSS Rules:

a.playlink:hover div.hoverbox {
  1. background-image: url(http://cdn-0.nflximg.com/en_US/buttons/player-add.png);
  2. background-position: center;
  3. background-repeat: no-repeat;
}

When served from confluence, I see:

a.playlink:hover div.hoverbox {
  1. background-image: url(/images/player-add.png);
  2. background-position: center;
  3. background-repeat: no-repeat;
}
The image URLs are different because I'm hosting the image locally on confluence to avoid non-secure content warnings. I provided the CDN version in my sample code to make it easy for anyone to copy if they were so inclined.
It's the same image though.
If I prefix with #com-atlassian-confluence, it still matches the rules, but still shows the same behavior.

Looking for something else?

Find Questions…

or Browse other questions tagged:

or Ask a Question