I have a <ul> <li> list where in HELP, MISC and POLICIES are the headings with no <a> tag.
other <li> elements have hover effect as font-size:16px (normal size is 14px).
how can i remove hover of headings??
FIDDLE
you can use
.footer_ul li.bold1:hover {
font-size:14px;
text-decoration:none;
}
to remove the hover of headings
updated jsFiddle File
or alternate you can use .footer_ul li a:hover instate of .footer_ul li:hover
.footer_ul li a:hover {
text-decoration:underline;
font-size:16px;
}
jsFiddle
I checked you fiddle it was good.
The only change you need to make is you have to add :hover class for a tag and not li tag
`
.footer_ul li a:hover {
text-decoration:underline;
font-size:16px;
}
`
Use :not() selector. A single change is required like so.
.footer_ul li:hover:not(.bold1) {
text-decoration:underline;
font-size:16px;
}
Working demo
Add this css after ".footer_ul li:hover"
.footer_ul li:hover:first-child {
text-decoration:none;
font-size:14px;
}
Related
I am having problem in calling html elements from CSS, via CSS selectors. Strangely, the class selectors are working, but i can not select the elements from CSS. So i had to give them classes.
What i want to do is; When the Mouse hovers on i want <ul> to appear, and when Mouse does not hovers <a>, I want <ul> (menu) to dissapear.
Html:
<div id="cFilter">
Sort by date
<ul class="uls">
<li class="lis">From old to new</li>
<li class="lis">From new to old</li>
</ul>
</div>
Css:
.menus {
color:#2a2d4d;
float:left;
margin-left:13px;
margin-top:20px;
text-decoration:none;
text-align:center;
background-color:#ffd800;
width:200px;
height:40px;
position:relative;
z-index:9999;
}
.menus:hover > ul{
color:#4d78bd;
cursor:pointer;
display:block;
}
.uls {
display:none;
background-color:#808080;
width:150px;
height:60px;
margin-top:60px;
list-style-type:none;float:left;
position: absolute;
margin-left: 14px;
margin-bottom:-100px;
}
.lis:hover {
color:#eedede;
cursor:pointer;
}
Here is my fiddle: JSFiddle
Hope someone can help me..
It's because you're using the wrong selector:
.menus:hover > ul {
The > is a direct child selector. And your ul is not a child of your a.menus. They are sibilings, so you would have to use + for imediate sibilings, or ~ for general sibilings:
.menus:hover ~ ul {
http://jsfiddle.net/rdLjkt64/2/
Try some thing like this
.menus:hover + .uls
{
color:#4d78bd;
cursor:pointer;
display:block;
}
OR
.menus:hover + ul
{
color:#4d78bd;
cursor:pointer;
display:block;
}
DEMO
Add plus
.menus:hover > .uls
to
.menus:hover + .uls
try like this
.menus:hover ~.uls
{
color:#4d78bd;
cursor:pointer;
display:block;
}
If you want to use Element selector instead
.menus:hover ~ ul
{
color:#4d78bd;
cursor:pointer;
display:block;
}
> is a direct child selector, so it wont wok as ul is not a child
Demo Fiddle
You are trying to display the next element (<ul>) on hovering the previous one (<a>). To achieve this use the "+" selector to affect the next sibling:
.menus:hover + ul
instead of the child selector (>) you have been using before.
.menus:hover > ul
Here is the updated fiddle
But this causes the to hide again if you enter it by mouse, so replace the hovered Element with its parent and use the child selector again:
#cFilter:hover > ul
like in this fiddle
i want to make it so that when I hover the cursor over a link in the list, a bullet point image shows up to the left of the list text. however, it does not seem to work.
I've also tried the following CSS and it does not work:
ul.navibox a:hover{
list-style-image:url(images/crown-icon.jpg);}
any ideas? thanks
Current CSS:
ul.navibox{
margin:0 0 0 0;
padding:5px 0 0 20px;
list-style-type:none;
font-family:arial,verdana,helvetica,sans-serif;
font-size:14px;
color:#333333;}
ul.navibox li a:link{
color:#ff0;
text-decoration:none;}
ul.navibox li a:visited{
color:#f00;}
ul.navibox li a:hover{
color:#f0f;
list-style-image:url(images/crown-icon.jpg);}
HTML:
<div id="middle_left_box"><span style="padding-left:10px">Categories</span>
<h3>accessories</h3>
<h4>Supplies:</h4>
<ul class="navibox">
<li>Pellets</li>
<li>Gas</li>
<ul>
</div>
Without a Demo being provided it's hard to be sure but I would try this
ul.navibox{
margin:0 0 0 0;
padding:5px 0 0 20px;
list-style-image:none; /* default 'non-image' */
font-family:arial,verdana,helvetica,sans-serif;
font-size:14px;
color:#333333;}
ul.navibox li:hover{
list-style-image:url(images/crown-icon.jpg);}
ul.navibox li a:link{
color:#ff0;
text-decoration:none;}
ul.navibox li a:visited{
color:#f00;}
ul.navibox li a:hover{
color:#f0f;
}
Your previous CSS applied the list image to the anchor link which doesn't have that property available to it. So the hover has to be on the list item itself.
If you want to display a bullet aside <a> , you need to reset display of <a> to list-item.
Then , on hover you may switched bullet image from a transparent one to an arrow or so.
CSS example and DEMO:
ul.navibox li a:link {
color:#ff0;
text-decoration:none;
display:list-item;
list-style-position:inside;
list-style-image:url(http://dummyimage.com/16x16/fff/fff&text=);
}
ul.navibox li a:visited {
color:#f00;
}
ul.navibox li a:hover {
color:#f0f;
list-style-image:url(http://dummyimage.com/16x16/fff/000&text=->);
}
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;
}
What's the best way to change the background-color of an li tag with onMouseOver?
I tried it this way, but it won't work:
Code generating the HTML:
echo "<a href=".$obj_players->Page." target=_parent>
<li style=\"background-color:#FFFFFF;\"><span class=\"left\">" . $obj_players->Name . "</span><span class=\"right\">" . $obj_players->Viewers . "</span></li></a>";
CSS:
#navlist li:hover {
background-color:#2EA620;
}
#navlist li {
width:175px;
height:30px;
text-align:center;
line-height:30px;
font:"Myriad Pro";
font-size:14px;
padding-left:10px;
padding-right:10px;
border-bottom:1px solid;
border-color:#333;
}
Explanation: I have to declara the background color in the li tag because I have different li elements with different background colors. And li's are in a div with ID navlist.
I also have the problem that I don't want every li to change background color with onmouseover, but I will solve this later, since I think I should be able to manage it on my own.
You need to remove the background-color:#FFFFFF inline, and add that to the css. Then #navlist li:hover { background-color:#2EA620; } should work.
example: http://jsfiddle.net/jU8Pp/