Is there a way to do this without javascript and just using CSS?
I have a navigation. The text within the anchor elements are black. Upon hover of the line item the line item becomes orange. At that point I would like to alter the child anchor element text to be white.
What I have right now is an anchor tag rule to be white when hovered. Because the anchor is smaller than the line item it means that, hovering over the line item doesn't change the text to white straight away, only when the mouse hovers over the center, where the anchor tag is.
I could post html but I don't think its necessary. Is it? Hope I'm making sense and that my question is clear.
Put another way, I'd like to alter an element based upon the hover state of it's parent element.
It is not possible to target the parent element using CSS selector. You can instead add a :hover rule to line item to change its background color. At the same time, add an additional rule that changes the color of the child link upon hover:
li:hover {
background: orange;
}
li:hover a {
color: white;
}
Demo
You can try this. Giving a tag display:block; will take the full width of your li element.
#menu li a:hover {
background: #FC6;/*added*/
}
#menu a {
color: #000;
dispaly:block;/*added*/
}
DEMO
Related
I'm programming a simple wordpress page and want to change the background color of the menu bar (on the top right) when hovering over it. It's on this website: https://www.happylogo.be/.
I normally just do this with 'add additional css' which just is a css file.
The weird thing is that I beleive my selector code is right because when I add 'visibility:hidden;' It rapidly disappears and reappears again when hovering over the li items.
The css code I use now:
#menu-primary-coach li:hover{
/*#menu-primary-coach is the id of the lu*/
background-color: #c7143a !important;
}
But it doesn't work.
How can I change the background color when hovering over the menu items?
I noticed the <a>tag inside of your <li> is actually overriding the hover state with black.
#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
background-color: #000000;
}
You can remove this style or also set the hover state of the <a> to your desired color.
It's caused by this line of CSS. There is a hover on the <a> within the <li>. Since the page is using xhtml the hover style should be on the <a> rather than the <li>. If you use HTML5 it can be on the <li>.
#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
background-color: #000000;
}
i've got problem. I cant force the code to hover h3and div "underline" at the same time.
Thereis my code: https://jsfiddle.net/nac3570n/
As you can see hover's working but doesnt affect to underline at the same time, unless u'll move cursor on underline
Try changing this:
.underline:hover {
background-color: red;
}
to this:
a:hover .underline {
background-color: red;
}
Basically we move both :hover events to trigger on the same action. In this case, hovering over the parent <a> tag.
https://jsfiddle.net/qmg6wbv5/1/
...fiddle doesn't use your exact styles, but you'll have an easier time using a pseudo element (:after) on the h3, I think. That way it naturally responds to hovering the h3. Hope that gets you on the right track.
My navigation has dropdowns, and within them there are a tags wrapping the items. I want the hover background color to be applied when I hover over that entire li. Right now it's only applying to the li, and when I move off the text it's the other background color.
Live here: http://stage.christinas-kitchen.com/
I'm working under "recipes", if you look under sprinkles that is how it should work (I have nothing wrapped in an a tag yet).
Any insight is appreciated.
One of the styles in your stylesheet is
.nav ul li ul li a {
background: #6ac4c2;
display: block;
color: #fff;
text-decoration: none;
}
That is your problem; since the a has its own background color, and the a is a child of the the li, changing the li's background color does not influence the a's background color.
You really just want the li styles to be determining the background color of your menu items, so just remove the background attribute from that style declaration. That way, the a's background will be dictated by the parent li, and your menus should work how you want them to
please take a look here.
I have added the following code:
.entry_blog a {color:#000;}
.entry_blog a:hover {background-color: #000;color: #FFD700;}
The text links work fine. However when you go over the images, you can see a black line appearing in the bottom of each image inside the <div class="entry_blog singlepageentry" itemprop="articleBody"> div.
I cannot add any new class to the images links. If I could add an image to the images links, I could simply add a
.entry_blog .newclass a:hover {background:none}
However since there is no such a possibility, does anybody know how, in this case, I can remove the background from the images inside the entry_blog div?
Thank you in advance
Seeing as all your images appear to be standalone blocks, all you need to do here is set your img elements to display as block-level elements (using display: block). This forces them to fill the containing a element without leaving any gaps, fully hiding any background which may be underneath:
.entry_blog a { color:#000; }
.entry_blog a img { display:block; }
.entry_blog a:hover { background-color: #000; color: #FFD700; }
Your question is sort of confusing.
The best method is to add background:none or background:transparent to .entry_blog a
You say you can't add any new style to image links. What does this mean?
Surely you can alter the CSS.
I have nested ul/li's and the problem is that if you add a background color to the top li, because there are nested items within it the whole list appears to have this background color rather than just the top li (I assume this is because it's extending the height of the top li).
Is it possible to only apply the background color to the top li?
I hope this makes sense!
There is the relationship selector > which means "immediate children":
ul > li {
background-color: <your color>;
}
but I have had problems with cross-platform compatibility while using it. What you can also do is set up multiple levels of rules:
ul li {
background-color: <your color>;
}
ul li li {
background-color: none;
}
You're speaking of the top li, but I think you mean the root li, which has child elements containing li elements as well. In that case, you can set the background color as follows:
.myroot>ul>li { background-color: Yellow }
Note: the sample above requires a wrapper element (usually a DIV) with the class name "myroot".
See this article for more about CSS child selectors.
What I understand is that you have a UL with LI in it (let's call it 'parent'), and that LI also has a UL with LI (let's call them child) in it? You apply the background to the parent and it's also visible under the child?
As the child are located INSIDE the parent they must change his height, so the background is bigger than tought, there is 2 way to block that, you could (as mentionned earlier) put another background the the child, or you could put something like a SPAN inside the parent and put the background on the SPAN instead of the LI.parent.
well you can always apply a different background colour to the child li's.
use jquery and give a special class to the first li
`$("ul li:first")`.addClass('special_bg')
= get only the first <-li-> element of the <-ul->
This depends on your CSS. You could define a top-level li class and use that to set the background colour.
Children always inherit attributes from the parents; that's why it's called Cascading Style Sheets.
I suggest to give all li elements a default background color and just override it for the top level elements (for example with a special class).