How can I prevent a child div :hover event to be overridden by its parent :hover event?
This is how I create the div element:
HTML
<script type="text/javascript">
var counterd = document.createElement("div");
counterd.id='counterdiv';
counterd.innerHTML = "(<?php echo $woocommerce->cart->cart_contents_count ?>)";
document.getElementById('menu-item-130').appendChild(counterd);
document.getElementById("counterdiv").setAttribute('onclick', 'location.href = "/varukorg"');
</script>
The CSS to change style is:
#menu-item-130:hover #counterdiv, #menu-item-130.current_page_item #counterdiv {
color: black;
}
I also have some CSS rules to style #menu-item-130 on :hover. The problem occurs when the mouse goes over #counterdiv, it changes the #counterdiv text to black. I don't want the #counterdiv element to trigger the parent's event when it is hovered. The hover CSS for the #menu-item is the following:
#menu-item-130 a:hover, #menu-item-130.current_page_item a {
background: url(../images/cart-59-24black.png) gray 21px 18px no-repeat!important;
}
and as both div elements have the property position:relative;, I have tried with z-index but it does not seems to work. I know that its impossible to make a parent div to change style when hover a child.
Edit: Hi guys i find a solution like a hardcode but its work ;) as the counter div was on top i made the #counterdiv on hover at the same size as the #menu-item-130 and puted the same backround style to it so now its work. Thanks for the help anyway..
I am not sure if i understood your question, but here is an example how it could work for you:
DEMO
Explanation
The :hover even you already fine works fine. But there is something called propagation, which will make the browser detect in which parent element your cursor is, and trigger the events/pseudo-elements/pseudo-classes related to this element. In order to stop this propagation, (in CSS), you need to counter it with the child element's properties.
Parent's background property: gray
Child's background property: transparent !important
To understand what !important clearly does, I suggest you to read more about CSS Specificity (MDN)
Solution
Apply a transparent background to the element itself with the !important notion:
HTML
<div id="item-130">Item 130
<div id="counterdiv">CounterDiv</div>
</div>
CSS
#item-130:hover > #counterdiv {
background-color:gray;
}
#counterdiv:hover {
background-color:transparent !important;
}
Live Demo
Related
I can change the height of a div with the :focus class. So:
<div id="ytb"></div>
...is changed with a click on the div with the :focus pseudo class css:
#ytb {
width:75px;
height:50px;
}
#ytb:focus {
height 100px;
}
But when I nest a youtube video via iframe in the #ytb div, a click on the div just wouldn't change the height anymore. I think the focus goes to a div inside the iframe. also tried the :focus-within class. But it didn't work. How can I get this to run?
Hi I was answer this question and I notice an strange behavior
The Context
I have an HTML structure like this:
<div class="btn">
Click me
</div>
<div class="element">
Div Box With Pseudo Element
</div>
And CSS Just the relevant
.element {
display:none;
}
.element:after {
content:" ";
display:block;
width:0;
background:black;
transition:6s ease;
}
.element.clicked:after {
width:100%;
}
Where the element needs to be display:none and need to be show/hide when click the btn element. That works fine with Jquery and fadeToggle.
Also I add a class to animate a pseudo-element with transition and width. Need to animate at the same time of the fade on the parent.
The problem
If you see this FIDDLE, you can notice at first click the expected behavior is the pseudo-element grows form 0 to 100% but instead is 100% without grow.
If you click again then it's fine changing from 100% to 0
Question
I notice whit the inspector that setting display:none to the element makes the pseudo-element disappear.
This causes the element can't be from 0 to 100% since doesn't exist.
Anyone Knows How to stop that behavior or how to avoid the non-render of the element. I was wonder about the form pseudo-elements were rendered and If they need a Visible parent
This issue doesn't happen with visibiliy or opacity just with display
I believe this issue lies in the fact of how CSS transition works. As you well know a css transiton is applied when an element has a property changed from one value to another.
But in your scenario, the property isn't in fact changing. A pseudo element does not exists while its parent is in the display: none property. So when you call the fadeToggle(), the element becomes display: block and then pseudo is created.
But immediately it is already affected by the .clicked class of the parent, which gives the pseudo a width: 100% property.
So, essencially, the width property is never changed. It goes from "non existent" to "100%", therefore, no transition is applied.
EDIT
So, what you really need is to revert the order of the apply of .clicked class to after the fade started:
Updated Fiddle
$('.element').stop().fadeToggle(3000).toggleClass('clicked');
I am trying to construct a chunk of code that is an image and a text caption, which is a single anchor. the image is an image tag and the text is in a DIV tag.
When the anchor is hovered, the image+text box has a border appear, and the text div transitions between text to then show the background image (using opacity 1 to 0)
USING CSS ONLY
My issue is that I can't seem to find the best CSS to write this code, what I have is:
HTML:
<div class="outerCCBox">
<a href="*url*" >
<img src="images/logo/clarityTeeth.png" alt="">
<div class="clarityUnderBox">
<div class="clarityBox">
Clarity Makeup
</div>
</div>
</a>
</div>
The "clarityUnderBox is a presized box containing the background image that appears when the covering text fades out on hovering over the anchor tag.
CSS:
.clarityUnderBox {
width:256px !important;
height:86px !important;
background:url('../../images/logo/Clarity-C-320.png') no-repeat;
background-size:contain;
}
.clarityBox {
width:100% !important;
height:100% !important;
background-color: #000;
opacity:1;
color:#f0f0f0;
transition: color 0.4s linear,opacity 0.6s;
}
All CSS is simplified for this question (fonts, transition -types- etc removed).
The issue I am having appears to be with the next piece of code, the "hover" element:
.outerCCBox a:hover > .clarityUnderBox .clarityBox {
opacity:0;
color:transparent;
}
EDITED CSS:
originally
.outerCCBox a:hover .clarityUnderBox .clarityBox {
opacity:0;
color:transparent;
}
which behaves in the same way, as with the ">" selector.
The issue is that the hover works fine when hovering over the anchor element but when moving away, the .clarityBox class doesn't return to it's pre-hover state.
1) How do I make this return to it's pre hover state?
1b) Do I need to make a separate ~ a:not-on-hover CSS declaration?
2) How can I tidy up and make the "hover" CSS line more specific? - the way I've done it above works, but I'm sure there's a better syntax to it. I have tried things like using "*" and ">" selectors with limited success (combined with some rearrangement of class orders in the HTML)
Thanks for your guidance.
EDIT:
As requested, a fuller fiddle is here:
http://jsfiddle.net/gwrrezys/9/
But this fiddle doesn't show the image above the text, but it does replicate the general issue with the hover not updating / or not returning to its original state.
cheers
SOLUTION:
As suggested in comments by Martin, making the anchor a block element fixed this issue, I have retained the issue in the jsFiddle for reference and can be found by repeatedly hovering and then hovering off the anchor area.
Your actual problem is with the hovered parent (your anchor element) not having a width set.
If you make the anchor a block element it will fix the "leaking" content issue. by either
making the anchor display: block with set width and height
or making the parent fit the content by making it display: inline-block
DEMO
General to displaying children on hovered parents:
As soon as you extend a child of a :hover element over the whole screen (100% width and height) the parent will stay in the hovered state as long as you are hovering over the child.
To get around that you need to break the child out of its parents flow ... for example by making it's position: fixed (or position: absolute if the parent has no position: relative).
For example by using something like this on the child - and the z-index: -1; here makes sure it moves behind the parent:
position: fixed;
width: 100%;
height: 100%;
top:0;
left: 0;
z-index: -1;
DEMO
Or (depending on what area exactly you wan to cover with the child) you can alternatively extend the child only over a particular hover area (e.g. its parent) ... here you would then use position:absolute on the child and position: relative on the parent (to make sure you keep the child in the parents flow).
DEMO
A quick read on positioning elements: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
This is in reference to a nav menu on a site I am working on:
I have applied a hover style to these particular anchors (subnav buttons):
ul#css3menu ul li:hover>a {
Now I want to further style any of these anchors that have a child span element. How could I code that?
I have it somewhat working by applying the style to the span element:
ul#css3menu ul span:hover{
The problem with this is the style is only applied when hovering over the span element's space rather than while hovering over the anchor that is parent to the span (the entire subnav button including its padding)
CSS currently doesn't have a way to check for children (or, what would essentially be a 'parent selctor', something that often comes up as a wishful thought in discussions about css. Read more: http://css-tricks.com/parent-selectors-in-css/)
In order to style something like that, you'd have to use jQuery (or, javascript...)
$('ul').each(function () {
if ($(this).find('span').length) {
$(this).css({your style here});
}
}
If what you do is not dynamic, it would always be easiest to give a class to those lists beforehand and style them.
I just figured out a nifty solution without JS!!
The padding on the anchor is 8px and the padding on the span was set to 0 so I changed the padding on the span to 8 and set the margin to -8 and now the style works when hovering the entire button and I was still able to maintain the size of the button! Stoked!
ul#css3menu span{
display:block;
padding:8px;
margin:-8px 0 -8px -8px;
}
I had to leave the right margin alone to maintain the width of the button and the positioning of the next level subnav.
On mouseover a div the background color is changing but not the div text color.
Can you please let me know if it is possible?
It's just a plain css and html.
my css code is
.divTable-row:hover{
background:#65A3B8;
color:#ffffff;
}
Try to force the style, with !important , like this:
.divTable-row:hover{
background:#65A3B8;
color:#ffffff !important;
}
this could fixed the issue when overlapping with another css rule.
Example fiddle with an overlapping problem: http://jsfiddle.net/dSGf7/2/
Fixed example using !important : http://jsfiddle.net/dSGf7/3/