I have this HTML:
<ul>
<li>
<ul>
<li>
<span> Test </span> Link
</li>
</ul>
</li>
</ul>
And this CSS:
ul li ul li span {
text-decoration:none;
}
Why would the span inside the anchor still have underline?
In other words: How would I get all the text underlined, except the SPAN. Thanks
You need to target the anchor tag and not the span tag so use this
ul li ul li a {
text-decoration:none;
}
Reason: text-decoration: underline; is applied to <a> tag by default browser stylesheet, so if you want to over ride it or if you want that none of the <a> tags on your website should have an underline than simply use this
a {
text-decoration: none;
}
Edit: As I read your comment if you want your text to be underline except the text within <span> than use this
Demo
ul li ul li a {
text-decoration:underline;
}
ul li ul li a span {
text-decoration:none;
display: inline-block;
}
Make tat span in class as a
a is the tag which takes default underline since it is a link but not span. So whatever is inside the a tag takes the underline automatically.
ul li ul li a{
text-decoration:none;
}
DEMO
It should be
ul li ul li a {
text-decoration:none;
}
ul li ul li a:hover {
text-decoration:underline;
}
ul li ul li a span {
text-decoration:none;
display: inline-block;
}
DEMO
It should be
ul li ul li a {
text-decoration:none;
}
Related
I have the following HTML code
<div>
<nav>
<ul>
<li >A</li>
<li class="selected">B</li>
<li >C</li>
</ul>
</nav>
</div>
and the following CSS code
div nav ul li {
background: blue;
color: white;
}
div nav ul li.selected {
color: black;
}
running on JSFiddle.
The white foreground color for text content entries "A", "B", and "C" is only showing up on the bullets. This is because as this post illustrates, when an href attribute is present the color attribute is not inherited by the a tag.
However I don't understand how the color value for "div nav ul li a" interacts with
(the pseudoselectors)[http://www.w3schools.com/css/css_pseudo_classes.asp] "div nav ul li a:link", "div nav ul li a:visited", "div nav ul li a:hover", and "div nav ul li a:active".
Because a tags have default color set by the browser (unlike p,span,div) so you have to set the color for the a tag.
div nav ul li {
background: blue;
color: white;
}
div nav ul li a {
color: white;
text-decoration:none;
}
div nav ul li.selected {
color: black;
}
div nav ul li.selected a{
color: black;
}
The color is not inherited by the a element becasuse you stopped at the li level. div nav ul li
This will only get the li element not the a element. If you want the a element
div nav ul li a{
//CSS properties for the a element
}
2.The Psuedoselectors deal with an elements state and how it looks in that state. For instance if you wanted to change how your a element looks on hover you would do something like :
div nav ul li a:hover{
color: orange;
//CSS properties for the a element after hover
}
The reason why this div nav ul li { color: white; } doesn't work is because that's for text inside the li, you need to target the link like this div nav ul li a { color: white; }
Take a look at the updated fiddle. Here you can see the effects of the link pseudo classes.
And here's a good article about them. W3Schools isn't the best resource.
See this fiddle
Add
div nav ul li a {
color: white;
}
to your CSS
In your CSS, you gave a style only for the <li>s and not for the <a>s inside the <li>s.
Please see this fiddle to see the effects created by four of the pseudo-selectors.
a:link - to specify style for the unvisited link
a:visited - to specify style for the visited link
a:hover - to specify style on mouse over
a:active - to specify style on link selected
I want to change color of the tags li ul li but it doesn't change with the given html amd css.
HTML
<ul class="s">
<li>
<ul>#1
<li>Hello</li>
<li>Hello</li>
</ul>
<ul>#2
<li>Hello</li>
<li>Hello</li>
</ul>
</li>
</ul>
CSS
.s li ul li{
color:red;
list-style:none;
}
.s li {
list-style:none;
}
.s li ul{
color:green;
}
.s li ul:hover .s li ul li{
color:black;
}
I have created a fiddle here
What do I need to add or change to make the color change on hovering?
No element matches .s li ul:hover .s li ul li
The last CSS rule should be
.s li ul:hover li{
color:black;
}
Edit: jQuery's way to do it needs a mouseenter and mouseleave event, but the hover method covers both.
$(document).ready(function() {
$( ".s li ul" ).hover(
function() {
$('li', this ).css('color','black' );
}, function() {
$('li', this ).css('color','red' );
});
});
.s li ul:hover,
.s li ul li:hover {
color:black;
}
You miss the , to separate the two selector and forget :hover on the second.
Change your hover css like this you forgot the last li
.s li ul li:hover{
color:black;
}
I got a css menu with 3 levels. You can see my actual code right here http://jsfiddle.net/7rMgu/
As you can see, my secondary level don't keep the light blue background when navigating in the 3rd level. I've looked over the website for similar thread but I just found similar problems with only 2 levels. Also, can someone explain when I should use the '>' in css as I'm a bit confused.
CSS
html{height:100%;background-color:#0d497d;}
body{width:100%;height:100%;margin:0px;padding:0px;color:#575757;font:0.75em "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;}
div.menuAdmin ul{margin:0;padding:0;float:right;height:100%;}
div.menuAdmin ul li{display:block;float:left;height:23px;margin-bottom:0;}
div.menuAdmin ul li a{color:#fff;padding:0.1em 0.3em 0.2em 0.3em;text-decoration:none;font-size:12px;display:block;margin:0.85em 0em 0em 0em;width:130px;background-color: #0d497d;border:1px solid #78B9EF;border-radius:5px;}
div.menuAdmin ul li:hover a{color:#000;border-radius:5px;background-color:#78B9EF;}
div.menuAdmin ul li ul{display:none;}
div.menuAdmin ul li:hover > ul {display:block;height:20px;width:139px;position:absolute;margin:0;}
div.menuAdmin ul li:hover > ul li a {line-height: 20px;color:#fff;text-decoration: none;margin: 0;padding-bottom: 0.1em;background-color: #0d497d;border:1px solid #78B9EF;border-radius:5px;}
div.menuAdmin ul li:hover > ul li a:hover {color:#000;text-decoration:none;text-shadow:none;background-color: #78B9EF;}
div.menuAdmin ul ul li:hover > ul {display:block;position:absolute;left:100%;top:0;width:139px;}
div.menuAdmin ul > ul > ul li:hover > a {color:#444;background-color:#78B9EF;}
HTML
<div class='menuAdmin'>
<ul>
<li>
<a href=''>A</a>
<ul>
<li>
<a href=''>1</a>
<ul>
<li>
<a href=''>A1</a>
</li>
<li>
<a href=''>A2</a>
</li>
<li>
<a href=''>A3</a>
</li>
<li>
<a href=''>A4</a>
</li>
</ul>
</li>
<li>
<a href=''>2</a>
</li>
<li>
<a href=''>3</a>
</li>
<li>
<a href=''>4</a>
</li>
</ul>
</li>
<li>
<a href=''>B</a>
</li>
<li>
<a href=''>C</a>
</li>
<li>
<a href=''>D</a>
</li>
</ul>
</div>
Thanks
To keep the :hover effect you need to make the change on hover the li element not just the a tag, so you have this:
div.menuAdmin ul li:hover > ul li a:hover
Must be:
div.menuAdmin ul li:hover > ul li:hover > a
With the hover on the li element keeps the effect since the ul wich is the submenu is part of the li.
Check the Demo http://jsfiddle.net/7rMgu/1/.
Now your second question when use this >; when you only want to affect the direct children, it let you avoid the same style on nested elements. An example with the same selector I have fix, if you remove the last > check what happen:
http://jsfiddle.net/7rMgu/3/
It changes all a inside the li even if are inside some nested elements.
Here is an updated fiddle:
http://jsfiddle.net/ryanwheale/7rMgu/2/
Essentially, you always want the :hover selector to be on the LI. You had it on the A.
Also, the > selector in CSS means "direct children"... best explained by example:
<div class="my-div">
<p>This should be blue</p>
<div>
<p>This should be green</p>
</div>
</div>
and this css:
.my-div p { color: green }
.my-div > p { color: blue }
You have a few redundant rules, I've tried to boil it down for you:
.menuAdmin ul{ /* all lists */
margin:0;
padding:0;
list-style: none;
}
.menuAdmin li { /* all list items */
margin:0;
padding:0;
}
.menuAdmin > ul { /* first level list*/
float: right;
}
.menuAdmin > ul > li { /* first level list items*/
float: left;
}
.menuAdmin ul ul { /* second and third level list */
position: absolute; /* remove from flow */
display: none; /* hide by default */
}
.menuAdmin ul ul ul { /* third level list */
top: 0;
left: 100%;
}
.menuAdmin li:hover > ul { /* first level list inside of a hovered item */
display: block;
}
.menuAdmin a { /* all links */
color:#fff;
padding:0.1em 0.3em 0.2em 0.3em;
text-decoration:none;
font-size:12px;
display:block;
width:130px;
background-color: #0d497d;
border:1px solid #78B9EF;
border-radius:5px;
}
.menuAdmin li:hover > a { /* links inside hovered list item */
color:#000;
background-color:#78B9EF;
}
As already answered, > means "child" (a.k.a. direct descendant)
See demo at http://jsfiddle.net/7rMgu/5/
code below not working
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li:hover
{
display:inline;
font-size:30px;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
i supposed they should have been arranged themselves horizontally on hovering.
link- http://www.w3schools.com/css/tryit.asp?filename=trycss_display_inline_list
I am not sure if you are going right direction.
Do you want to rearage position of menu items when user put mouse cursor on it?
It can not work. If user put mouse on "About" item, it disapears and apperas in first line with other elements, but it loses hover state and apears back, under the cursor, so it get back hover state and move to first line again in loop....
You need to apply it to all li on hover of the ul
DEMO http://jsfiddle.net/LstNS/26/
ul
{
list-style-type:none;
margin:0;
padding:0;
}
ul:hover li
{
display:inline;
font-size:30px;
}
Though this effect is a little weird, try this way:
ul {
list-style-type:none;
margin:0;
padding:0;
}
ul:hover li { /*<<<here's the magic!*/
display:inline-block;
font-size:30px;
}
The way you've tried, you're not changing the anchor to be inline, but the list item. The problem is that you're setting the display: inline to only one "li", this is not applied to the others items. You need to make all of your "li" inline on the hover of your whole list (ul).
I'm sorry, but I don't understand your question. Are you trying to inline your links? If so, try this for your css markup..
<style>
ul { list-style-type:none; margin:0; padding:0; }
ul li { display: inline !important; }
ul li a:link, ul li a:visited { text-decoration: none; color: #1122CC; }
ul li a:hover, ul li a:active { text-decoration: underline; }
</style>
I am trying to change the background colour of an anchor element when it's in a hover state, the problem is I am not able to achieve this with style I have below.
jsfiddle
http://jsfiddle.net/fwP6g/
css
.dropdown ul{
margin:0; padding:0; float:left; width:100%;
}
.dropdown ul li{
list-style:none; float:left; width:100%;
}
.dropdown ul li a{
float:left; width: 265px; height:20px; padding:5px;
padding-top:10px; color:#000; font-size:12px;
border-bottom:1px dotted #666; background-color:#FFF;
}
.dropdown ul li a:hover{
background-color:#F80101; !important
}
.dropdown ul li:last-child a{
border-bottom:none;
}
.dropdown ul li a#pink{
background-color:#FFE8E8;
}
html
<div class="dropdown">
<ul>
<li>Orders</li>
<li>Favourites</li>
<li>Account</li>
<li>Settings</li>
</ul>
</div>
I'm confused, I don't why this is not working, any help would be appreciated.
The !important needs to go before the closing ;.
.dropdown ul li a:hover {
background-color:#F80101 !important;
}
jsFiddle example
It's not semantically correct to have two elements with the same id. Also, using ids for your selector gives the rule a very high precedence, which is why you need to use !important.
I would suggest giving the last 2 list item links a class of pink instead of an id.
Then you would just need to declare the .pink rule before the :hover rule. Since both rules have the same precedence, and the :hover rule comes after, it will override the .pink rule.
http://jsfiddle.net/fwP6g/2/
HTML
...
<li><a href="/account" class='pink'>Account</a></li>
<li>Settings</li>
...
CSS
.dropdown ul li a.pink{
background-color:#FFE8E8;
}
.dropdown ul li a:hover{
background-color:#F80101;
}
Change your id="pink" to class="pink", than in your css add this to your hover .dropdown ul li a.pink:hover
Add this:
false:
.dropdown ul li a:hover{
background-color:#F80101; !important
}
true:
.dropdown ul li a:hover{
background-color:#F80101 !important;
}