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
Related
Which is the best practice and why? Is there a difference between these two cases?
1.
a {
transition: color 325ms;
}
a:hover {
color: red;
}
2.
a:hover {
transition: color 325ms;
color: red;
}
It's not a bad practice, it depends. If you put transition in a pseudo class, than the transition will only happen when you are getting your mouse on the element, whereas if you put the transition on the base selector itself, which will animate on the element on mouse over and on mouse out.
Demo (Only if you declare transition on hover)
Vs
Demo 2 (transition on mouseover + mouseout)
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/
I have always wonder why this wouldn't work as it would make so much sense.
CSS:
#button1:hover {
background: green;
#button2 {
background: red;
}
}
HTML
<button id="button1"></button>
<button id="button2"></button>
If I hover over Button1, Button2's background should also change.
Is there a workaround to this other than the use of Javascript?
You can use the adjacent selector,
#button1:hover {
Background: green;
}
#button1:hover + #button2 {
Background: red;
}
Have a look at all the css selectors: http://css-tricks.com/almanac/
Oh by the way it's only possible to apply css on hover to elements after the hovered element. Parent elements and elements before the hovered element cannot be styled with css on hover. It's a limitation of css.
This can be done but CSS lacks the ability to provide powerful conditional statements. However if you look into SASS CSS LESS it is starting to happen.
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');
}
});
});
I added a "spoiler" class in CSS to use for, well, spoilers. Text is normally invisible but appears when the mouse hovers over it to reveal the spoiler to whoever wants to read it.
.spoiler{
visibility:hidden;
}
.spoiler:hover {
visibility:visible;
}
Should be simple, but for some reason this doesn't work. The text remains invisible even when I point the mouse on it. Any idea what could be causing this?
You cannot hover over a hidden element. One solution is to nest the element inside another container:
CSS:
.spoiler span {
visibility: hidden;
}
.spoiler:hover span {
visibility: visible;
}
HTML:
Spoiler: <span class="spoiler"><span>E.T. phones home.</span></span>
Demo:
http://jsfiddle.net/DBXuv/
Update
On Chrome, the following can be added:
.spoiler {
outline: 1px solid transparent;
}
Updated demo: http://jsfiddle.net/DBXuv/148/
It works not only for text
.spoiler {
opacity:0;
}
.spoiler:hover {
opacity:1;
-webkit-transition: opacity .25s ease-in-out .0s;
transition: opacity .25s ease-in-out .0s;
}
When the text is invisible, it practically does not occupy space, so it's practically imposible to trigger an hover event.
You should try another approach, for example, changing the font color:
.spoiler{
color:white;
}
.spoiler:hover {
color:black;
}
:hover pseudo class is only for a tags according to the CSS spec. User agents are not required to support :hover for non-anchor tags according to the spec.
If you want to use CSS to make visible your spoiler text you will need to place <a> tags around your spoiler content. This of course will mean that the mouse would turn into a pointer, but you can suppress this by adding cursor: none;.
If it's not working the try
.spoiler span {
visibility: hidden;
line-height:20px;
}
.spoiler:hover span {
visibility: visible;
line-height:20px;
}
Try
.spoiler{
display:none;
}
.spoiler:hover {
display:block;
}