I'm learning CSS and busy with an example that I cannot figure out.
I want to have the background of my element 'active' in the color green.
The element is a link in a navigation menu.
This is the HTML content of the element
And here is the CSS
Could you please let me know, what i did wrong so i can learn from it?
Thanks a lot!
The problem is that you are setting background of li element but the a tag is over it. so use this instead:
li.active a{
background-color:#00CC33;
color:blue;
border-color:#00CC33;
}
If you are using a class like you are you need to use .active instead of #active. Using # indicates an id not a class.
Related
For some reason on my the website I am developing I can't figure out how to get my a hrefs to change when you hover over the boxes like the everything else inside of it. Here is the website link: http://wowbbq.michaellgray.com/
Thank you,
Try this, you need to apply the effect when user hovers over the graybtn div, not the anchor tag itself...
.graybtn:hover a{ color: white }
OR
.pork:hover .viewallbtn a{ color: white }
I want to change the subnavs on this code but everytime I try it takes the parent element (the background image from above.
I would have thought adding the following code would get rid of the background image for the subnavs but it doesn't.
ul.subnav li {
background-color:000;
}
What I want is to do some basic css for the subnavs with the names of each link. Nothing fancy.
Heres a link to the fiddle
http://jsfiddle.net/mitchelll182/t7QQ8/1/
Ok, so I see you're doing a CSS only menu, but that involves putting classes on everything and it ends up being a huge code mess. I think a better way would be to use jQuery. Something like this: http://jsfiddle.net/ewB9b/
See how the HTML code is nice and clean? Just nested UL's with one class. Now in the CSS, you can easily style the main links differently from the drop-downs. Read the comments in the CSS to see what's what.
.
Try:
ul.subnav li {
background-image: none;
background-color:000;
}
I'm trying to make a default hover effect for all my inline menus but the hover effect are not covering the entirely "li a" element.
I've put the code below to ilustrate the problem.
http://jsfiddle.net/yWqK4/
You are modifying the <a> tag to a block disaply and doing all other kind of unnecessary things.
The only thing you need to do, is to change the background color of your element.
Replace your CSS that is used for the hover effect with:
.Menu li a:hover {
background-color: rgba(0,0,0,0.3);
}
and it is working as expected. See http://jsfiddle.net/muNFY/
you don't need use :before to get desirable result. Fixed tour styles here http://jsfiddle.net/yWqK4/2/
i have this menu schema:
<nav>
<ul>
<li>home</li>
<li>coleção</li>
<li>downloads</li>
<li>contato</li>
</ul>
</nav>
My LI is float:left so, the itens are side by side. i want when i hover the a:hover my background LI, and a color changes.
See this fiddle: http://jsfiddle.net/56wUm/
If you hover only on li, the link dont work and the a dont change the color!
ty for help!
If you still need help, I would suggest adding the padding to the a element in css rather than li. For example something like this: http://jsfiddle.net/MGRBS/2/
That way the link takes up the entire block space, Good luck. :D
You should prefer using CSS Sprites to happen that. refer to these links
vid link
http://css-tricks.com/css-sprites/
To fix exactly what is going on, you need to change your a:hover rule slightly:
ul li:hover a { color: #fff }
See: http://jsfiddle.net/56wUm/4/
However, in terms of usability, I think you'd be better off making the links take up all of the menu space, making a large target.
You want to move some of that CSS from the A to the LI. The goal is to get the A to butt right up against the LI so there's no gap. You just want to use the LI's for their floating property, think of them like TDs in a TABLE. They should have no real style of their own.
Referencing this fiddle
I want to color the background of the LI being hovered over. However it seems to set the class on the entire set of LI elements (not just the hovered one).
Can someone see what the issue is here?
just do this:
.parentSelectorBox li:hover
{
background-color:red;
}
you don't need js to achieve hover effect. CSS will be fine.
This is because you anchor your JS to the whole list.
See that.
I don't remove all JQuery stuff, but only what set to hover your li class.
I suggest to remove JS that know is useless