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.
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
}
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 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;}
HOw to style link with class selected under this html structure
<li class="submenu_items" style="display: list-item;">
<ul>
<li>
<a class="selected" href="/page">Page</a>
</li>
</ul>
</li>
This should do it for you:
.submenu_items ul li a.selected{
/* your CSS properties here */
}
You can also use the > operator to denote a direct descendant.
There are a number of variations in how you can target the .selected link, I'd also reccommend you have a look at the MDN article on CSS specificity
Use the below to style selected
.submenu_items ul li > a.selected{/* your code goes here. */}
Hope this helps.
To over-ride parent styles (in this case 'submenu_items') you just need to make your CSS targeting more specific. For example:
.submenu_items ul li a.selected{
/* Add your CSS */
}
The navigation menu of a fictitious company is as follows:
The company specialises in the made-up, "Crab Sitting", but offers two other services that are targeted at people's anthropod pets.
It has been decided that the link to "Services" in the navigation should lead to "Pet Crab Sitting" right away — without a general page about their services.
That is easy to do with HTML:
<ul>
<li>Home</li>
<li>About</li>
<li>Services
<ul>
<li>Crab Sitting</li>
<li>Polishing Crustacean Shells</li>
<li>Massages for Anthropods</li>
</ul>
</li>
<li>Contact</li>
</ul>
But from a UX standpoint, a rollover effect that will change both is necessary to clarify that the two lead to one place.
In other words, making it appear that the two list elements are one link.
How can a :hover effect be achieved on "Services" and "Crab Sitting" at the same time with CSS, but without sacrificing HTML semantics?
else, you may as well filter from href :
This way, it doesn't matter much where similar href link stands, as long as it's being a child within adjacent ul .
http://jsfiddle.net/GCyrillus/b5Lzn/
[href*="crab-sitting"]:hover, [href*="crab-sitting"]:hover + ul [href*="crab-sitting"] {
background:green;
}
and if in second link, you forget last slash on href, it still works;
http://jsfiddle.net/GCyrillus/b5Lzn/1/
<li>Services
<ul>
<li>Crab Sitting</li>
the best you can do is:
http://jsfiddle.net/ZVUu2/2/
a.blah:hover
{color: red;}
a.blah:hover + ul > li > a.blah
{color:red;}
<ul>
<li>Home</li>
<li><a class="blah" href="/services/crab-sitting/">Services</a>
<ul>
<li><a class="blah" href="/services/crab-sitting/">Crab Sitting</a></li>
<li>Massages for Anthropods</li>
</ul>
</li>
</ul>
li:hover{
This is for the event on the main li
}
li:hover ul li:first-child{
here you have selected the first element of the nested ul when the main li is hovered
}
Happy coding