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

Richard Richard September 7, 2011

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. :-)

2 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

0 votes
Answer accepted
Richard Richard September 7, 2011

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.

0 votes
David at David Simpson Apps
Marketplace Partner
Marketplace Partners provide apps and integrations available on the Atlassian Marketplace that extend the power of Atlassian products.
September 7, 2011

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 Richard September 7, 2011

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. <input class="enabled-button" style="box-sizing: border-box; display: block; float: right; font-size: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 4px; vertical-align: top; position: relative; z-index: 1;" type="checkbox"/>background-image: url(http://cdn-0.nflximg.com/en_US/buttons/player-add.png);
  2. <input class="enabled-button" style="box-sizing: border-box; display: block; float: right; font-size: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 4px; vertical-align: top; position: relative; z-index: 1;" type="checkbox"/>background-position: center;
  3. <input class="enabled-button" style="box-sizing: border-box; display: block; float: right; font-size: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 4px; vertical-align: top; position: relative; z-index: 1;" type="checkbox"/>background-repeat: no-repeat;
}

When served from confluence, I see:

a.playlink:hover div.hoverbox {
  1. <input class="enabled-button" style="box-sizing: border-box; display: block; float: right; font-size: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 4px; vertical-align: top; position: relative; z-index: 1;" type="checkbox"/>background-image: url(/images/player-add.png);
  2. <input class="enabled-button" style="box-sizing: border-box; display: block; float: right; font-size: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 4px; vertical-align: top; position: relative; z-index: 1;" type="checkbox"/>background-position: center;
  3. <input class="enabled-button" style="box-sizing: border-box; display: block; float: right; font-size: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 4px; vertical-align: top; position: relative; z-index: 1;" type="checkbox"/>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.
TAGS
AUG Leaders

Atlassian Community Events