SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    326
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    list-style-image: can you make it a hover?

    Hi, I was just curious to know if you could make your list-style-images hover over a different image, if not what would be an alternative? But if it can be done can anyone help me get started on the right path? thanks!

  2. #2
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    326
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did list-style-image, then list-style-image li:hover and it worked, but I'm pretty sure IE isn't gonna allow this, since :hover has to be attached to a. Nevertheless, I've done a bit and I would like to know what you think of the following code, also if there is a way to shorten it.

    Code HTML4Strict:
    <html>
    <head>
    <title></title>
     
    <style type="text/css">
     
    #sidenavmnu { width: 100%; background-color: #000; padding: 100px; }
    #sidenavmnu ul { list-style-type: none; margin: 0; padding: 0; margin-left: 50px; }
    #sidenavmnu li a { color: #fff; text-decoration: none; background: url(redbtn.gif) no-repeat; }
    #sidenavmnu li a:hover { background: url(yellowbtn.gif) no-repeat; }
    #sidenavmnu li a span { margin-left: 20px; }
    </style>
    </script>
    </head>
     
    <body>
     
    <table border="0" id="sidenavmnu">
    	<tr>
    		<td>	
    			<ul>
    				<li><a href=""><span>Tennis</span></a></li>
    				<li><a href=""><span>Tennis</span></a></li>
    			</ul>
    		</td>
    	</tr>
    </table>
    </body>
    </html>

  3. #3
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,830
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    A few thoughts:
    * None of that should be in a table.
    * I can't see the point of the <span> at all.
    * Putting the hover on the <a> makes it IE6 friendly, which is good.
    * You've got a random </script> making a nuisance of itself.
    * You don't need to repeat "no-repeat" in the :hover line, it will be carried over from the line above if you don't set it.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    I'll echo all that Stevie just said plus the following



    #sidenavmnu { width: 100&#37;; background-color: #000; padding: 100px; }

    width:100% + 100px padding = 100% + 200px wide

    You can't add padding to 100% and you would rarely add padding to the table element anyway. You could add padding to the td or an inner element instead but as Stevie said the table is a wasted element anyway.

    I'm also guessing that you added the span so that you could move the text away from the background image but you could have done this by simply adding left padding to the anchor instead (or using a text-indent.)

  5. #5
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    326
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright well there are a few things to ignore in the code, the </script> must of got copied into there because I just noticed it. I know about the 100px padding, but I'm guessing the key focus of this was lost or I didn't really clearly explain the matter better. I did also want the span to be ignore, it was clearly servicing a purpose to indent the text but in the wrong way, I was intended to using padding left for the anchor and I also know that it shouldn't be in a table to begin with, clearly I'd put this into a div and I do realize the inheritance to shorten up the code.

    I was just thinking if there was a better way to do this and when I started this thread, I was trying to use the list-style-image as a hover, but using it as a background is just as effective, thanks for your help.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jlisec01 View Post

    I was just thinking if there was a better way to do this and when I started this thread, I was trying to use the list-style-image as a hover, but using it as a background is just as effective, thanks for your help.
    The list-style image is hard to style cross browser so what you are doing is a better alternative.

    Sorry about all the other comments but you did actually ask
    I've done a bit and I would like to know what you think of the following code, also if there is a way to shorten it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •