Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Change background colour of h3 on hover

Discussion in 'Website Design Forum:' started by bamme, Aug 4, 2010.

  1. bamme

    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 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.
     
  2. Mark Alexander

    Mark Alexander Senior Member

    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;}
     
  3. Levi

    Levi Moderator Staff Member

    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; } 
     
  4. bamme

    bamme Senior Member

    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.
     
  5. Mark Alexander

    Mark Alexander Senior Member

    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.
     
  6. Levi

    Levi Moderator Staff Member

    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;}
     
  7. bamme

    bamme Senior Member

    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?
     
  8. Levi

    Levi Moderator Staff Member

    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
     
  9. Mark Alexander

    Mark Alexander Senior Member

    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.


    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
     
  10. bamme

    bamme Senior Member

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

    bamme Senior Member

    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:

     
  12. bamme

    bamme Senior Member

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

    Harry Senior Member

    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:
     
  14. Levi

    Levi Moderator Staff Member

    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
     
  15. Harry

    Harry Senior Member

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

    Renniks Senior Member

    It's also simpler to think that you have a base and need to change something, what is it you need to change...
     
  17. clivesteve001

    clivesteve001 Junior Member

    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
     
  18. Harry

    Harry Senior Member

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

Share This Page