Change background colour of h3 on hover

bamme

Senior Member
Hi everyone,

I want the h3's here: http://victorycompositesltd.com/EMMAS/thehub/services/index.html (in the blue sorta rounded boxes) to change colour when hovered over.

I've tried a simple bit of css:
#services #middle.sub h3:hover {background:red;}

to test it out, but it hasn't worked. However, it says it would, on this page:
Boagworld - CSS backgrounds on inline type (this comment:)

I think I have your solution - apply the :hover to the heading element, not the anchor. So, instead of

a:hover {background:#color},

do this:

h3:hover {background:#color}

IE 6 doesn't respect hover for non-anchors, so just add a bit of jquery:

$('h3).hover(
function(){$(this).addClass('hover');},
function(){$(this).removeClass('hover');}
);

And modify your css like so:

h3:hover, h3.hover {background:#color}
(I ignored the ie6 part as im not optimizing for ie6 its just some volunteer work) but I get nothing, is this outdated now? Or am i doing something stupid..

Thanks everyone.
 
Code:
.sidebox h3:hover {    background-color: red;}

or, if you want them to change colour when the whole box is hovered over:

Code:
.sidebox:hover h3 {    background-color: red;}
 
just do css seriously :)

Assuming this is just for text hyperlinks :)

I did this for a friends site using css (and will be doing similar on mine), they have animated fades and rounded corners which are css3 so only work on some browsers - this is working with normal links but just change the a to h3 :)

Non css3 browser just have a square box without and fades/rounded corners

so this is for no background to an off white background, all with a pale blue underlined text for the hyperlink :)

Obviously text sizes, padding etc can be altered to your taste

Code:
a:link { color: #5779a6; font-size: 10pt; line-height: 12pt; text-transform: none; padding: 1px 2px; -moz-transition-property: background-color; -moz-transition-duration: 0.5s; -o-transition-property: background-color; -o-transition-duration: 0.5s; -webkit-transition-property: background-color; -webkit-transition-duration: 0.5s; transition-property: background-color; transition-duration: 0.5s; } a:visited { color: #567aa5; font-size: 10pt; line-height: 12pt; text-transform: none; -moz-transition-property: background-color; -moz-transition-duration: 0.5s; -o-transition-property: background-color; -o-transition-duration: 0.5s; -webkit-transition-property: background-color; -webkit-transition-duration: 0.5s; transition-property: background-color; transition-duration: 0.5s; } a:hover { font-size: 10pt; line-height: 12pt; background-color: #f6f5f1; text-transform: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-transition-property: background-color; -moz-transition-duration: 1s; -o-transition-property: background-color; -o-transition-duration: 1s; -webkit-transition-property: background-color; -webkit-transition-duration: 1s; transition-property: background-color; transition-duration: 1s; }
 
oh no - sorry, the boxes in the main panel, reading "midweek, evening, weekend, multiple bookings"
i just tried this from your previous post though, using Firebug: .abouthd:hover {background:red;} to no avail :/ im not sure why that doesnt work.

Jquery curvycorners is applied to the boxes (CurvyCorners - Beautiful rounded corners for your HTML boxes) but i wouldnt have thought that'd make a difference, as the background colour is defined in the css, it's just the curvy corners that are applied using jquery.
 
Oh, I'm blind, I only saw the h3s in the sidebar. The reason it's not working then is a mixture of inline styles overriding the :hover style and the fact that the h3 element is behind the div with the blue colour, so it's turning red, but hidden.

For a quick fix you can do

Code:
h3.abouthd:hover div {    background-color: red !important;}

Although the source should really be tidied, it has a lot of unneeded divs and inline styles, which makes stuff like this complicated and confusing.
 
What you're trying to do can be done using css but you need to add it into the css first - abouthd class doesn't look to be there in the css file :p

If you want to keep css animations change my above code a:hover to .abouthd:hovers (along with the rest if needed :)) and then knock out all references to border radius (thats being done with javascript) change colour of text, background, padding etc to your taste.

pretty sure that should do it, it's basically what markalexander said but with the right css class :p

If you're not interested in css fading just do the simple .abouthd:hover {background-color: colourcode/name;}
 
Wow thankyou, can i ask.. how you know that?? (sorry that sounds realy stupid, but i'd really like to be able to figure that out for myself..)

Also it unfortunately doesn't replicate the rounded corners when the background changes. Do you think it's overall easier to use a background image here, that changes position when hovered over?
 
are you doing the rounded corners with css3 or with that javascript?

As to how I found out no abouthd - well I used web developer toolbar for firefox and then after I opened the css file (option on toolbar :)) I used find/search to look for abouthd, it never came up :). I looked for it to see if there was anything there to be the issue :)

If you wanted to move away from javascript based rounded corners, you could always look into css conditions and then use background image hovers on browsers that don't support css3 rounded corners
 
emmaburge said:
Wow thankyou, can i ask.. how you know that?? (sorry that sounds realy stupid, but i'd really like to be able to figure that out for myself..)

Who, me? How did I know it was behind the blue div? Just looking at the source (with firebug) and seeing what you had given the blue background to, which was the child div inside the h3 element, so it was always going to be in front of any styling you gave to the h3.


emmaburge said:
Also it unfortunately doesn't replicate the rounded corners when the background changes. Do you think it's overall easier to use a background image here, that changes position when hovered over?

That's again because of your complicated source code, it has a lot of extra tags and styles that it doesn't need, you don't even need the h3 tag really (it's not technically a header), only the anchor. Simple version of what you want to do:

Rounded Corner Buttons
 
Thanks very much for that Mark, soo helpful! and for explaining Levi - this I think is the way I will go in future if it's a button I'm 'rounding' - thanks so much. Also didn't know about conditional-css.com good shout that's so useful, just tried it out :)
 
I was just thinking about applying the conditional-css thing Levi was talking about, that would create seperate rules for IE and browsers that don't support css3 rounded corners and make the links bave a background image that moved to show a different colour on hover. Is this the best method to use:

Advanced CSS Menu

(id have to make each link into an <li> and also add a span at the end. I'd therefore need to add styling for that list and it's list items, as what i have currently thanks to Mark anthony is just links:

<div id="button-nav">
<a id="midweek" href="index.html">Midweek</a>
<a id="evening" href="evening-venue-hire.html">Evening</a>
<a id="weekend" href="weekend-venue-hire.html">Weekend</a>
<a id="multiple" href="multiple-bookings.html" class="last">Multiple Bookings</a>
</div>
 
That's again because of your complicated source code, it has a lot of extra tags and styles that it doesn't need, you don't even need the h3 tag really (it's not technically a header), only the anchor. Simple version of what you want to do:

Rounded Corner Buttons

I just thought - in something like Firebug, you get the javascript created styles -- css rounded corners was a little jquery thing i used to create rounded corners without images that also appeared rounded in IE, just incase you didn't figure :)
 
Levi said:
Code:
a:link { color: #5779a6; font-size: 10pt; line-height: 12pt; text-transform: none; padding: 1px 2px; -moz-transition-property: background-color; -moz-transition-duration: 0.5s; -o-transition-property: background-color; -o-transition-duration: 0.5s; -webkit-transition-property: background-color; -webkit-transition-duration: 0.5s; transition-property: background-color; transition-duration: 0.5s; } a:visited { color: #567aa5; font-size: 10pt; line-height: 12pt; text-transform: none; -moz-transition-property: background-color; -moz-transition-duration: 0.5s; -o-transition-property: background-color; -o-transition-duration: 0.5s; -webkit-transition-property: background-color; -webkit-transition-duration: 0.5s; transition-property: background-color; transition-duration: 0.5s; } a:hover { font-size: 10pt; line-height: 12pt; background-color: #f6f5f1; text-transform: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-transition-property: background-color; -moz-transition-duration: 1s; -o-transition-property: background-color; -o-transition-duration: 1s; -webkit-transition-property: background-color; -webkit-transition-duration: 1s; transition-property: background-color; transition-duration: 1s; }

I don't know if you know, but this CSS is really bloated…

I won't copy the whole lot but with links you can just have:

Code:
a { common link styles like colour, weight, font size etc }a:visited { only things different to the above, no need to repeat things like weight if they are the same }a:hover { only things different to the above, no need to repeat things like weight if they are the same }a:active { only things different to the above, no need to repeat things like weight if they are the same }

So using a real example, yours might look like:

Code:
a { color:red; font-size:1.2em; font-weight:bold; text-decoration:none; }a:visited { color:pink; font-size:1.2em; font-weight:bold; text-decoration:none; }a:hover { color:red; font-size:1.2em; font-weight:bold; text-decoration:underline; }a:active { color:white; background:red; font-size:1.2em; font-weight:bold; text-decoration:none; }

Whereas is should be:

Code:
a { color:red; font-size:1.2em; font-weight:bold; text-decoration:none; }a:visited { color:pink; }a:hover { text-decoration:underline; }a:active { color:white; background:red; }

I hope that I haven't insulted intelligence there :up:
 
no insult, it's a case of get it working first, then worry about size reduction for me :p

even stranger is that on some of the css it looks like I've done it and on some I haven't - hmm
 
That's not about size reduction though really, it's just about sensibility.
Plus maintainability, I worked with a guy who used to write his link styles out like that and I had the pleasure of updating the link styles for a rebrand. Wow that was a low point haha…

Dropping the last semi-colon of any set of CSS rules would be reduction, using the cascade and inheritance is, well, just CSS haha :)
 
It's also simpler to think that you have a base and need to change something, what is it you need to change...
 
Hi there!

You can do it by creating a class or id of h3 and do like this..
#h3 a:hover{text-decoration: underline; color: green;} or
.h3 a:hover{text-decoration: underline; color: green;}

I hope it will work.. All the best
 
clivesteve001 said:
…You can do it by creating a class or id of h3 and do like this..…

This isn't a good idea, it just bloats the markup unnecessarily…
 
Back
Top