I've created a simplified version of my situation here: https://jsfiddle.net/jyngjhpb/
In this example, the drop down part doesn't change it's opacity when the a above it is hovered:
a:hover + ul{
opacity: 1;
}
In the real situation, the drop down part (nested ul) is hidden (display: none) and should also pop up whenever the 'parent' link is hovered. The a is hovered, as indicated by Chromes code inspector and the pointer as a cursor, but nothing happens.
I've also tried
li:hover ul{
opacity: 1;
}
as the + might not work in the browser (after all you're also hovering the parent li), but this also fails.
I've looked up some people with similar problems but couldn't find anything helpful. Does anybody know what to do here?
Your issue deals with specificity. The :hover is not that powerful as your first rule. So change it to:
#menuList ul {
opacity: .3;
}
#menuList a:hover + ul {
opacity: 1;
}
The reason behind it is, id attributes take much precedence over generic attributes. See the precedence here:
Example:
Fiddle: https://jsfiddle.net/jyngjhpb/1/
Related
Is it possible to keep an element hover effect when hovering over a sibling element? I created a jfiddle to demonstrate. I'm trying to keep the .child-menu-img 100% opacity while hovering over the H3 text. I figured out that when hovering over the .child-menu div I can affect the h3 using .child-menu-item:hover>h3 but I can't find a way to keep the hover effect working while hovering over the h3. Hope this makes sense! I'm wondering if this will require jQuery but so far, my searches haven't found any solution (javascript or pure CSS). Or maybe I need to modify my markup in order to get this working. I'm so lost!
Thanks for any help!
http://jsfiddle.net/inhouse/rfexypLz/
Seems like you need to use .child-menu-item:hover as the base for all your hover state styles:
.child-menu-item:hover a>img {
opacity: 1;
filter:alpha(opacity=100);
}
.child-menu-item:hover>h3 {
background:white;
}
.child-menu-item:hover h3 a {
opacity: 1;
filter: alpha(opacity=100);
text-decoration: none;
}
Updated fiddle
I am working with this menu: http://cssmenumaker.com/menu/light-opera-drop-down-menu
I would like to make the last menu option unique and have it always highlighted red, with a unique hover/active. The problem I am having is navigating the existing code so that I can add styles to my unique option. I tried identifying it via the , and then I can call it in the stylesheet
#cssmenu ul li.donate:hover > a {
background: red;
This allows me to change the hover to red, but I am unable to get it to just always be highlighted red. I tried
#cssmenu ul li.donate {
background:red;
}
but that does nothing.
#cssmenu ul:last-child li.donate:hover > a {
try using :last-child
The reason your styles do not register is because the selector associated with your background declaration is not specific enough. In CSS, the C stands for Cascading. The browser trickles down or cascades multiple declarations that may or may not affect the same element. Ultimately the styles that will be applied are the ones that come with the most specific selector.
Here's the fiddle that works: http://jsfiddle.net/8kfwQ/2/. Hover over "products" and then "product 2" and you'll see a "Donate" link.
Here's the code that I've appended at the very end of the CSS in the fiddle:
#cssmenu .has-sub .has-sub ul li.donate a {
background-color: blue;
}
The selector is more specific and that's why the default maroon background gets overridden.
I want to make my wordpress menu items have 2 different background colors: one for the link and one for :hover. I'm a CSS beginner and found a solution but unfortunately it's not a good one because I target by the menu id generated by wordpress and if I delete the menu and create another one, that id will be gone and my styling will not work anymore.
Example:
menu-item-1212 a {
background-color:#fff;
}
menu-item-1212 a:hover{
background-color:#000;
}
Is there a more elegant way to solve this so that no matter what id the first menu item will have, it will retain that background-color and the hover one?
I've searched online for an alternative and found :nth-child. I did tried to create something like this:(but it didn't worked)
#menu-secondary li a:nth-child(1) {
background-color:#fff;
}
#menu secondari li a:hover:nth-child(1) {
background-color:#000;
}
Will appreciate any suggestion, thanks.
You are targeting an anchor which is the nth child of li element. Each li only has one anchor probably. You need to target li as the nth child of the menu, like this:
#menu-secondary li:nth-child(1) a {
background-color:#fff;
}
#menu secondari li:nth-child(1) a:hover {
background-color:#000;
}
You won't even need nth-child if you are using a common background color and common hover color..
#menu-secondary li a {
/* Styles goes here */
}
As you said you are not looking forward to use an id as it may be dynamic, than you can also select the elements using element selector if it's unique, like
div.class_name ul li a { /* class_name indicates your wrapper element class name */
/* Styles goes here */
}
Also be sure you make your anchor tag display: block; if you want to cover up entire li
Check out www.sadrobotdevelopment.com for example of what I am talking about (best viewed in chrome)
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
This is the CSS that makes the menu flyout, what I want to figure out how to do is make it clickable as well. Mostly due to the fact that tablets and smartphones don't have hover. Is there something in CSS that can handle this, or do I need to look into getting my site optimized for mobile browsing?
If there is a link before child UL, you could use :focus and :active pseudoclasses for link in conjunction with adjacent-sibling combinator:
#menu LI > A:focus + UL,
#menu LI > A:active + UL {
opacity: 1;
/*...*/
}
There's no way to achieve click events with pure CSS. You can hook up a javascript click handler to add an "active" class to your element and have the CSS use that in addition.
I appear to have found a flaw with CSS3 transitions. Hopefully not though. Here is the dilemma.
.element a span {
display:none;
opacity:0;
position:absolute;
top:-10px;
-webkit-transition-property:top, opacity;
-webkit-transition-duration:500ms;
}
.element a:hover span {
display:inline;
opacity:0.8;
position:absolute;
top:10px;
}
The transition does not work like this at all. If one removes the display:none attribute then it does work, however we need in this case the display:none attribute on our link so that it cannot be interfaced with before hover.
Any ideas?
Marvellous
you could try put overflow: hidden on the a, that way the span should appear invisible, without the need to use display: none; as you have moved it 10px up.
or instead of display:none; try use visibility:hidden;
Changing display:none to display:inline makes the other properties moot as far as transitions are concerned. So separate the display:none/display:block change from the class change, using setTimeout. The browser needs to see them as separate changes in order to apply your transition. Sadly I think this means you can't just use :hover but will need a JS event handler on hover.
Specifically, I would use an inline style attribute of style="display:none" that you add or remove with JS, and take display:none out of the stylesheet.
Then, in JS, after removing display:none (explicitly or via the :hover pseudoclass's style rule), use a setTimeout function that explicitly adds/removes the class. That way the "this is display:inline" change is a discrete, earlier paint-able action from the other style property changes that you want the transition rules applied to.
In the opposite direction, change the class back in an event handler, and use a setTimeout function to set display:none as an inline style. The timeout will need to match the transition duration of course (so that display:none happens after the transition is complete).
or you can try using width or height 0 combined with overflow hidden on the invisible element so it doesn't disturb any of the other elements whilst preserving the transitions.
ie.
.element a span {
overflow: hidden;
height: 0;
width: 0;
opacity:0;
position:absolute;
top:-10px;
-webkit-transition-property:top, opacity;
-webkit-transition-duration:500ms;
}
.element a:hover span {
overflow: visible;
height: ???px;
width: ???px;
opacity:0.8;
position:absolute;
top:10px;
}
I would go with JS. CSS transitions suck with heights.
Here is what I used to make a click expand function, you could change a few things and do the same on a hover
// Dropdown
$(function(){
// Target the ul sibling to keep it generic
var selector = $('.dropdown article > ul').siblings().addClass('selector');
selector.click(function(){
var targetUl = $(this).siblings('ul');
if (targetUl.hasClass('open')) {
targetUl.removeClass('open').slideUp();
} else {
targetUl.slideDown().addClass('open');
}
});
});