Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Member Tinah's Avatar
    Join Date
    Oct 2003
    Location
    Croatia/England
    Posts
    72
    Member #
    3656
    look at this
    http://www.tinatoth.com/test.htm

    this is the css
    Code:
    .picborder {border: 1px solid #FFCC99;}
    
    .picborder a:hover {border: 1px solid #FFCCCC;}
    this is the image code:
    Code:
    <a href="jhfijhfjf"><img src="th_gull2.jpg" width="100" height="66" class="picborder"></a>
    and you can check the whole source code on the page itself...

    why does it not work? im sure ive done this before. What is wrong with it? am i blind?

  2.  

  3. #2
    Senior Member Jack000's Avatar
    Join Date
    Aug 2004
    Posts
    250
    Member #
    7173
    it's not working because the picborder class is applied to the image. ".picborder a:hover" means that you are trying to change an <a> inside of the <img>

    you should apply the class to the <a> tag and use pichover:hover

    don't forget to use img { border:none; }

  4. #3
    Senior Member zionlocke's Avatar
    Join Date
    Jan 2003
    Location
    .: l33t Basement :.
    Posts
    736
    Member #
    483
    Liked
    3 times
    The other solution:

    Here's what I do on my own sites for border color rollovers.

    HTML Code:
    <div class="galleryListImg">
    
    <a href="/photos/lm/01.jpg"><img src="/photos/lm/t01.jpg" width="160" height="160"></a>
    <a href="/photos/lm/02.jpg"><img src="/photos/lm/t02.jpg" width="160" height="160"></a>
    
    </div>
    Code:
    .galleryListImg	{
    	width: 100%;
    }
    
    
    .galleryListImg a	{
    	padding: 2;
    	text-decoration: none;
    	color: #666;
    }
    
    .galleryListImg a img	{
    	border: 1px solid #ccc;
    	background: #fff;
    }
    
    .galleryListImg a:hover img {
    	border: 1px solid #990000;
    }
    Cheers, zionlocke :chinese:
    Links: Zion Creation | Blog

  5. #4
    Member Tinah's Avatar
    Join Date
    Oct 2003
    Location
    Croatia/England
    Posts
    72
    Member #
    3656
    Quote Originally Posted by Jack000
    it's not working because the picborder class is applied to the image. ".picborder a:hover" means that you are trying to change an <a> inside of the <img>

    you should apply the class to the <a> tag and use pichover:hover

    don't forget to use img { border:none; }
    ok that makes sense. however it didnt work, and I must have got something wrong again. what do you mean by "use pichover:hover" ?

  6. #5
    Member Tinah's Avatar
    Join Date
    Oct 2003
    Location
    Croatia/England
    Posts
    72
    Member #
    3656
    Quote Originally Posted by zionlocke
    The other solution:

    Here's what I do on my own sites for border color rollovers.

    HTML Code:
    <div class="galleryListImg">
    
    <a href="/photos/lm/01.jpg"><img src="/photos/lm/t01.jpg" width="160" height="160"></a>
    <a href="/photos/lm/02.jpg"><img src="/photos/lm/t02.jpg" width="160" height="160"></a>
    
    </div>
    Code:
    .galleryListImg	{
    	width: 100%;
    }
    
    
    .galleryListImg a	{
    	padding: 2;
    	text-decoration: none;
    	color: #666;
    }
    
    .galleryListImg a img	{
    	border: 1px solid #ccc;
    	background: #fff;
    }
    
    .galleryListImg a:hover img {
    	border: 1px solid #990000;
    }
    I just tried that... exactly the way you quoted it, and it didnt work?? look
    http://www.tinatoth.com/test2.htm

  7. #6
    Senior Member Jack000's Avatar
    Join Date
    Aug 2004
    Posts
    250
    Member #
    7173
    because pichover is applied to the <a> tag, pichover a:hover would mean an <a> within the <a>, which does not exist. pichover:hover is the selector for the <a> tag.

    you should probably do it the way zionlocke has suggested. Simpler

  8. #7
    Senior Member zionlocke's Avatar
    Join Date
    Jan 2003
    Location
    .: l33t Basement :.
    Posts
    736
    Member #
    483
    Liked
    3 times
    You didn't change the border colors of my css code to fit what you want. The current hover border color is a shade of red. Here's the css code you want.

    Code:
    .galleryListImg	{
    	width: 100%;
    }
    
    
    .galleryListImg a	{
    	padding: 2;
    	text-decoration: none;
    	color: #666;
    }
    
    .galleryListImg a img	{
    	border: 1px solid #FFCC99;
    	background: #fff;
    }
    
    .galleryListImg a:hover img {
    	border: 1px solid #FFCCCC;
    }
    Cheers, zionlocke :chinese:
    Links: Zion Creation | Blog

  9. #8
    Member Tinah's Avatar
    Join Date
    Oct 2003
    Location
    Croatia/England
    Posts
    72
    Member #
    3656
    its not about the colour, its about the border not changing at all when i hover above it! it doesnt change to a shade of red!

    or does it work to you??

    ps. it works in firefox, doesnt work i IE6. :cross-eyed:


    i need something that works in IE6 though!!

  10. #9
    Member Tinah's Avatar
    Join Date
    Oct 2003
    Location
    Croatia/England
    Posts
    72
    Member #
    3656
    Quote Originally Posted by Jack000
    because pichover is applied to the <a> tag, pichover a:hover would mean an <a> within the <a>, which does not exist. pichover:hover is the selector for the <a> tag.

    you should probably do it the way zionlocke has suggested. Simpler
    im willing to try this once again, however, i swear, i have no idea what youre on about

  11. #10
    Senior Member zionlocke's Avatar
    Join Date
    Jan 2003
    Location
    .: l33t Basement :.
    Posts
    736
    Member #
    483
    Liked
    3 times
    Oooo, thanks for letting me know. You need to say class=pichover in your <a> tag instead of what I suggested. IE6 SUCKS!!!
    Cheers, zionlocke :chinese:
    Links: Zion Creation | Blog


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:31 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com