HTML for undeline mouse-over

Discussion in 'HTML & Website Design' started by Yigal6, Oct 29, 2007.

  1. #1
    Hello guys.
    I would like to add a code which will undeline links on my homepage whenever a cursor is positioned over them. I have tried to search for it online but only could find the code which affects all the links on the page. However, I am looking for code that will "highlight" only links in the featured categories ("Earrings","Black Diamond Jewelry", "Necklaces", "Gemstone Rings").
    Thanks in advance.
    www.belljewels.com
     
    Yigal6, Oct 29, 2007 IP
  2. jmhyer123

    jmhyer123 Peon

    Messages:
    542
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Just add this code to your css stylesheet file (.css file):

    
    a:hover.hassubmenu {
    text-decoration: underline;
    }
    
    Code (markup):
    or put this in your HTML code in between the header tags:

    
    <head>
    <style type="text/css">
    a:hover.hassubmenu {
    text-decoration: underline;
    }
    </style>
    </head>
    
    Code (markup):
    Hope that helped...;)
     
    jmhyer123, Oct 29, 2007 IP
  3. Yigal6

    Yigal6 Active Member

    Messages:
    129
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #3
    Thank you, but this code will affect all the links on the page.
    I want to use it only with the specific links.
     
    Yigal6, Oct 29, 2007 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Then wrap those links in a class, then target them in the css. Hell, if those are inside a menu of some sort you should already have a perfectly good ID or class to nab them with.

    Takes a quick look at the page in question - OH, never mind.
     
    deathshadow, Oct 29, 2007 IP
  5. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #5
    Do it using css classes.

    If they are in a list anyway surely you have a class for them already? But from deathshadows comment i'm guessing not.
     
    twistedspikes, Oct 30, 2007 IP
  6. Yigal6

    Yigal6 Active Member

    Messages:
    129
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #6
    No, unfortunately there is no class for them. Is there any way I can add a simple HTML code right before the links?
     
    Yigal6, Oct 30, 2007 IP
  7. ExplicitDesign

    ExplicitDesign Peon

    Messages:
    89
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    yup use CSS for this job
     
    ExplicitDesign, Oct 30, 2007 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Normally it's fairly easy to do, but not with this code. You will spend a long time adding classes to the links.

    For only the ones you want the underline in, see where the links are <li><nobr><a href="..."...? I dunno wtf the nobr is doing in there, or most of the other stuff either, but you'd add the class to the a (or the li if you wanted).

    <li><a class="underline" href="whatever..."...
    In the CSS, if you can find where the other links are styled (look for a, a:hover, that sort thin) and find the hover section and add
    li a.underline:hover {
    text-decoration: underline;
    }

    I wrote a longer name than normally necessary but who knows what's living in your code to screw that up.

    If this is a template you bought, I tell people with templates, "Don't change anything." Templates are written like a house of cards. They break easily if you touch them.
     
    Stomme poes, Oct 30, 2007 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Especially when they lack a doctype meaning it hacks around IE being in quirks mode, uses a half dozen tables with explicit widths when the whole thing even as a table layout should only need ONE, tries (and fails) to use a title for keywords instead of telling the user where they ARE, links in the stylesheet and some javascript BETWEEN the </head> and <body>, uses javascript for mouseovers, relies on image maps for TEXT with no mouseover/hover effects, uses the long-out of date NOBR tag, relies on 1px tall colspanning TD's for a border, uses JAVASCRIPT to add IE specific code on the fly, is loaded down with multiple redundant presentational tags, doesn't have a single header tag in sight, has 40 or so carriage returns in the middle for no fathomable reason, uses &nbsp; for spacing, repeatedly nests the same inlined presentation section after section instead of on the parent element, and in general is 35k of HTML for something that shouldn't even take a sixth that.

    If the page is newer than two years, I'd sue the designer. If it's more than two years old, I'd throw it out and start over from scratch.
     
    deathshadow, Oct 31, 2007 IP
  10. greekhand

    greekhand Active Member

    Messages:
    249
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #10
    using css class like few have been told before , is the best thing to do by far !!!

    but if you don't have the will to learn css right now , you can do it with javascript ... on the html element you need to add the 'onmouseover' event
    and buid function in javascript

    try google : javascript onmouseover
     
    greekhand, Oct 31, 2007 IP
  11. Yigal6

    Yigal6 Active Member

    Messages:
    129
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #11
    Thank you guys.
    The homepage was designed by me - a guy who does not know anything about HTML. I was searching for codes online and trying to put them together as I find them. That is the reason you see some weird redundant codes in the source. Wish I had more time to invest in learning HTML.
     
    Yigal6, Oct 31, 2007 IP