I have an image (logo to be precise) as the first item in Ubermenu (a popular Wordpress plugin). When I hover over this image present in the Ubermenu, the background color of the 'li' containing the image changes.
The HTML is this:
<ul id="megaUber" class="megaMenu">
<li id="menu-item-34157" class="xyz-header-logo menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home ss-nav-menu-item-0 ss-nav-menu-item-depth-0 ss-nav-menu-reg um-flyout-align-center ss-nav-menu-with-img ss-nav-menu-notext">
<img class="um-img um-img-noresize" width="16" height="16" src="http://example.com/wp-content/uploads/abc.png" alt="Cat">
</li>
<li>
... other menu items ....
</li>
.
.
.
</ul>
If I add a simple CSS rule 'background:none' via inspect element of the browser in:
#megaMenu .ss-nav-menu-with-img.ss-nav-menu-notext > a > img, #megaMenu .ss-nav-menu-with-img.ss-nav-menu-notext > span.um-anchoremulator > img {
background:none;
}
The background color gets removed completely (even without hover) for all the menu items, which is not desired.
Now my question is, what CSS rule can I use to specifically target the 'li' or the image present inside the 'li' to remove the background color on hover (other menu items should not get affected)?
The 'li' as shown in the code above has an id of menu-item-34157.
I have already unsuccessfully tried this to remove the background on hover:
#menu-item-34157, #menu-item-34157:hover, #menu-item-34157:visited, #menu-item-34157:link, #menu-item-34157:active {
background:none !important;
}
Any help would be genuinely appreciated.
Do this, this should work.
ul.megaMenu li:first-child a:hover {background: none !important;}
Related
In the code, there are two links and I want to implement different hover effects for both the links (i.e if I hover over I want to buy the link should become red and if I hover over the link I want to sell It should become blue). Please guide me on how I could achieve it
Here is the part of the code:
<ul>
<li><Link to='/buyer'>I want to buy</Link></li>
<li><Link to='/seller'>I want to sell</Link></li>
</ul>
In case if I used an anchor tag I could have used a: hover but was unable to find what to do in the above case.
Define class name to the <li> tag, then by using CSS Descendant Selector (a whitespace), you can reach the <a> tag:
.classNameOfLiTag a:hover {
// styling
}
Descendant selector can select any descendant elements wrapped under <li> regardless how deep. To be more precise, you can use child selector (>) that selects only <a> tag that is directly the children of <li> like so:
.classNameOfLiTag > a:hover {
// styling
}
In your js file:
<ul>
<li><Link to='/buyer' className={class1}>I want to buy</Link></li>
<li><Link to='/seller' className={class2}>I want to sell</Link></li>
</ul>
In your css:
.class1:hover {
color: red;
}
.class2:hover {
color: blue;
}
You can add different class to li and then give it hover styles
<ul>
<li className="link1"><Link to='/buyer'>I want to buy</Link></li>
<li className="link2"><Link to='/seller'>I want to sell</Link></li>
</ul>
CSS
.link1:hover{
// your style
}
.link1:hover{
// your style
}
Im trying to do something similar to this: CSS Menu - Keep parent hovered while focus on submenu
im using !important to override bootstrap colors
it works for the parent but i dont want the child li>a to be effected
.hover-li:hover a{
color: blue !important;
}
.hover-li ul li {
color: white !important;
}
the structure is like this:
<li class = "hover-li">
<a></a>
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
Try this
.hover-li:hover > a {
color: blue !important;
}
it only affects direct children
So I'm working with the standard wordpress navigation and I need to change the background of each menu item when the link inside the list item is active.
.current-menu-item does the trick for all list items but the problem then is that I have the same styling for each element.
For instance:
<nav>
<div>
<ul>
<li>
home
</li>
<li>
portfolio
</li>
</ul>
</div>
</nav>
Does anyone have experience with this?
I tried using pages like: http://codex.wordpress.org/Function_Reference/wp_nav_menu
But without any result unfortunately..
Also using child selectors didn't work..
It sounds like you want different active states for each individual link. .current-menu-item captures the active link, but doesn't offer customization for each individual link.
I think you can use a combination of nth-child and .current-menu-item. Do you know where .current-menu-item gets applied? If it's on the <li>, this should work:
nav li:nth-child(1).current-menu-item {
background-color: red;
}
nav li:nth-child(2).current-menu-item {
background-color: blue;
}
nav li:nth-child(3).current-menu-item {
background-color: green;
}
See it in a fiddle: http://jsfiddle.net/Dz32R/
I've got a few list items, the first one's with a featured class and the after a while a few without. Withh CSS, I'd like to select the first item in the list that does not have a featured class...
The code is as follows:
<ul>
<li class="featured"></li>
<li class="featured"></li>
<li></li>
<li></li>
<li></li>
</ul>
I've tried the following with no effect:
ul li:not(.featured):first-child {
/* Do some stuff here */
}
Any ideas on how to do this without resorting to jQuery?
UPDATE
The ability does exist to add non-feature classes if that would help. E.g:
<ul>
<li class="listing featured"></li>
<li class="listing featured"></li>
<li class="listing"></li>
<li class="listing"></li>
<li class="listing"></li>
</ul>
Use the "Adjacent sibling combinator": http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators
li.featured + li:not([class="featured"])
In addition to the great answer by #Cédric Belin - if you wanted to make the CSS backwards compatable you could use the following CSS selectors:
ul .featured + li {
/* some styles */
}
ul li.featured {
/* some styles */
}
Note that the order of the CSS styles is important here as both selectors have the same weighting - so which ever style comes last will be the one that overrides the previous style (due to the cascading nature of CSS)
Working example: http://jsfiddle.net/Ku77T/
The following HTML is created by Joomla 1.7 for the menu of a site I'm working on:
<ul class="menu-tabbed-horiz">
<li class="item-435 current active parent">
<a class="firstmenuitem" href="/joomla/" >Home</a>
</li>
<li class="item-467">
<a href="/joomla/index.php/menu2" >Menu 2</a>
</li>
<li class="item-468">
<a href="/joomla/index.php/memu3" >Menu 3</a>
</li>
</ul>
Via CSS, I'm styling this menu. For example, I style the menu item that the mouse is hovering over like this: .menu-tabbed-horiz a:hover. The active one can be styled like so: .menu-tabbed-horiz .current a.
This works without problem, but now I would like to style a menu item differently when it is the current one and hovered on than when it is just hovered on. Something like .menu-tabbed-horiz a:hover && !.current, but that obviously does not work.
Any suggestions would be appreciated, Fabian
If I've understood your question correctly, then you're looking for something like this:
.menu-tabbed-horiz .current a:hover { /*Hovered and current*/ }
.menu-tabbed-horiz a:hover { /*Hovered (all)*/ }
This should work because the first selector is more specific than the second and will therefore be applied to elements with .current instead of the second selector.
Here's a working example of the above code.
You can't do this kind of thing directly. The solution is to define the "non-current" style for .menu-tabbed-horiz li, and the "current" style for .menu-tabbed-horiz li.active.
The second style is more specific than the first, so it will take precedence whenever both styles are present. The first style will be applied for all .menu-tabbed-horiz elements that don't have the .current class.