PDA

View Full Version : Help!!! a.hover Conflicts


urbanrays
11-11-2010, 08:25 PM
Hi

Just a quickie question.

I have a problem with a.hover and conflicting with .another a.hover

For arguments sake if I create

.nav a.hover and have a bgd image with this, then if I create
.another a.hover with no bgd image, when I hover over .another the bgd image of .nav a.hover pops up underneath .another a.hover
To stop it from happening I have add this to .another

background-image: none;

Is this normal or have I broken it.

To add I have 4 different types of links on the site and they all pick up the .nav a.hover bgd image

Thanks for any help

gentleone
11-11-2010, 08:52 PM
You'll have to be more specific with your CSS rules and why did you use a class for hover and not the pseudo class like a:hover?

domedia
11-11-2010, 09:05 PM
A link will have this solved in no time too 8)

urbanrays
11-11-2010, 09:08 PM
sorry I am using

a:hover

Here is the code for two of them


.nav a:hover {
font-family: "Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
height: 30px;
width: 75px;
font-weight: normal;
color: #333;
text-decoration: none;
background-image: url(../img/navon.png);
}



And the next one


.more a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
font-weight: bold;
float: left;
height: 20px;
width: 70px;
color: #333;
background-image: none;
}



As you see I have to use

background-image: none;

To stop .nav background-image: url(../img/navon.png);
Showing up on .more a:hover when testing.

urbanrays
11-11-2010, 09:09 PM
A link will have this solved in no time too 8)

Sorry using xampp not online yet

DWcourse
11-12-2010, 12:20 AM
is whatever has the .more style applied within whatever has the .nav style applied? (now you see why a link would help?)

urbanrays
11-12-2010, 02:24 PM
is whatever has the .more style applied within whatever has the .nav style applied? (now you see why a link would help?)


Thanks DW thats as clear as mud, a link is not possible yet as I keep stripping back and changing things so I aint thinking of putting it online yet.

But I will try and see if what your are trying to get at is correct.


Right here goes,

Say if I have


<div id="container">
<div class="nav1">
<ul>
<li>This Link</li>
</ul>
</div>
<div class="nav2">
<ul>
<li>That Link</li>
</ul>
</div>
</div><!--End of Container"


2 different sets of navigation which are classes in the container id then I may get conflicts

but if I did the nav1 and nav2 like this it should stop the conflicts


<div id="container">
<div id="nav1">
<ul>
<li>This Link</li>
</ul>
</div>
<div id="nav2">
<ul>
<li>That Link</li>
</ul>
</div>
</div><!--End of Container"


Is this what you are trying to get at, or would be looking for if I had it online

gentleone
11-12-2010, 04:21 PM
According to your example your CSS should be:

#nav1 ul li a:hover {styles here}
#nav2 ul li a:hover {styles here}
This is more specific and goes by the name CSS specificity.

http://htmldog.com/guides/cssadvanced/specificity/
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Another thing... no need to wrap an ul in a div. an ul is a block level element too.

<ul id="nav1">
<li><a href="#">This Link</a></li>
</ul>

<ul id="nav2">
<li><a href="#">That Link</a></li>
</ul>

ul#nav1 li a:hover {styles here}
ul#nav2 li a:hover {styles here}

domedia
11-12-2010, 04:41 PM
If you're making a list, then adding a UL for each item is wrong.
A list looks like this
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

gentleone
11-12-2010, 06:52 PM
If you're making a list, then adding a UL for each item is wrong.
A list looks like this
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
I thought that he would know that so I didn't mentioned it. :)

domedia
11-12-2010, 07:06 PM
I figured. It was not directed at you gentleone 8)