I know that I can just disable pointer events on the covering elements, but I don't want to do that. I want both the covering and the covered elements to respond to mouse events, so that they both transition into the state corresponding to the hover selector when the mouse pointer touches them both.
You can define a parent container around the DOM elements that you would like to track for hovering. This StackOverflow thread shows a simple approach with a parent div having the class "section". It contains two elements that should both have a border around when hovering (code snippet is cited from this answer post):
<html>
<style type="text/css">
.section { background:#ccc; }
.layer { background:#ddd; }
.section:hover img { border:2px solid #333; }
.section:hover .layer { border:2px solid #F90; }
</style>
</head>
<body>
<div class="section">
<img src="myImage.jpg" />
<div class="layer">Lorem Ipsum</div>
</div>
</body>
</html>
Related
Please, can you tell me why when I visit one of the two links in the code, the picture does not get radius? And what can I do to get that done?
Notice the a:visited div.container div.title works fine
<html>
<head><title>Some title</title>
<style>
.container
{
width : 100;
height : 100;
}
.title
{
position : absolute;
}
a:visited.container img.pic
{
border-radius:50%;
}
a:visited div.container div.title
{
color : red;
}
</style></head>
<body>
<a href="#link01">
<div class="container">
<img class="pic" src="leb.jpg">
<div class="title">Title 01
</div>
</div>
</a>
<a href="#link02">
<div class="container">
<img class="pic" src="leb.jpg">
<div class="title">Title 02
</div>
</div>
</a>
</body>
</html>
Thanks
From w3schools.com
Definition and Usage
The :visited selector is used to select visited links.
Tip: Use the :link selector to style links to unvisited pages, the
:hover selector to style links when you mouse over them, and the
:active selector to style links when you click on them.
Browsers limits the styles that can be set for a:visited links, due to
security issues.
Allowed styles are:
color background-color border-color (and border-color for separate
sides) outline color column-rule-color the color parts of fill and
stroke All other styles are inherited from a:link.
You can use javascript for this purpose but not $("a:visited") since they don't support it anymore.
Solution with click event
a.visited .pic {
border-radius: 50%;
}
then import jQuery and add these lines between tags. This will add "visited" class on every clicked link
$("a").on('click' , function() {
$(this).addClass("visited");
})
Be aware after page reloads classes will be lost
Change the order of the declaration:
Instead of
a:visited.container img.pic
use
a.container:visited img.pic
I just saw another issue: None of your tags have the class .container set. I guess you mean something like that:
a:visited div.container img.pic
Also, the first declaration looks strange:
.container
{
width : 100;
height : 100;
}
You did not put any unit there (but it is necessary).
I recommend to change it to
.container
{
width : 100px;
height : 100px;
}
I'm trying to recreate something like the chrome developer tools element inspector, wherein I can get the element that's currently being hovered.
I want to add a hover effect to every element on the page sort of like this:
:hover {
border: 1px solid blue !important;
}
But the problem is that it'll show me every single parent element up until that point since they are also being hovered.
:hover {
border: 1px solid blue !important;
}
<div>1
<div>1.1
<div>1.1.1</div>
<div>1.1.2</div>
</div>
<div>1.2
<div>1.2.1</div>
<div>1.2.2</div>
</div>
</div>
Since there is no parent selector, I can't check to omit elements that have children that have the :hover property.
I can't use :last-child as the lowest level element may be a grandchild.
Any ways to style just the child-most element being hovered?
Found a solution using jQuery'smouseenter/mouseleave:
$("*")
.mouseenter(function(){
$(this).addClass("hovered");
$(this).parents(".hovered").removeClass("hovered");
})
.mouseleave(function(){
$(this).removeClass("hovered");
$(this).closest(":hover").addClass("hovered");
});
.hovered {
border: 1px solid blue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>1
<div>1.1
<div>1.1.1</div>
<div>1.1.2</div>
</div>
<div>1.2
<div>1.2.1</div>
<div>1.2.2</div>
</div>
</div>
Is there any way to change an element's css while focusing or hovering on one of it's children?
Ex: while I move my mouse on A, B's background color changes.
if B is a descendant A, it is possible.
--A
-----B
using #A:hover #B { background-color: blue }
DEMO
in sibling:
---A
---B
It is : #A:hover ~ #B { background-color: blue; }
DEMO
assume B is a descendant of A.
what if I want to change #A background, while I am hovering on B. how could it be?
--A
-----B
Doing this in pure CSS is unfortunately not possible...at this time. However, there is supposedly an upcoming parent selector that would work well in this scenario. Click here for more info.
Work-around
In the meantime, you can also use javascript and/or jquery to accomplish this pretty easily.
DEMO
HTML
<div id="div1">
div 1 area
<p id="paragraph">
This is paragraph
</p>
</div>
CSS
#div1 {
border:1px solid lightgray;
}
p {
margin: 50px;
background-color: lightblue;
padding: 8px;
}
.altbg {
background:grey;
}
jQuery
$(function(){
$('#paragraph').mouseenter(function(){
$(this).parent().addClass('altbg')
}).mouseout(function(){
$(this).parent().removeClass('altbg')
});
});
It is actually possible in css.
Somebody made this fiddle:
http://jsfiddle.net/u7tYE/
#a:hover + #b {
display:block;
background-color:rgb(200,200,150);
}
#b{display:none;background-color:rgb(200,200,150;}
<a id="a">Menu</a>
<div id="b">
<p>Home</p>
<p>About</p>
<p>Login</p>
</div>
It works perfectly.
So here's what Im looking to do in its most simplified form. I want to have a box appear on the page and when you hover over it, it's contents are visible, otherwise they are hidden. So for example let's say we have this:
<style type="text/css">
#box {
background-color:red;
width:100px;
height:100px;
}
</style>
<div id="box">
<img src="smileyface.png" />
</div>
Most of the time, the image is hidden and this looks like a red box, but when the div is hovered over the image appears. Is there any way to do this with CSS and not javascript. I know with javascript we could just remove the element and add it back in as we go, but I just want to show it and hide it. Thoughts?
*Must be IE 8 compliant because I'm a glutton for punishment.*
This is quite easy. Just change the display property of the image when the #box is hovered
#box > img {
display: none;
}
#box:hover > img {
display: block;
}
You can use :hover on any tag you'd like to:
#box {
background-color:red;
width:100px;
height:100px;
}
#box:hover {
background-image: src('smileyface.png');
}
I want that when the mouse stay over of the div hello, the paragraph with class nice_day and image dont be affected.
How should do it using css3?
<div class="hello">
<div class="stack"><img src="1.png"/></div>
<div class="overflow"><p class="ilove"><img src="2.png"/>Im a text</p>
<p class ="programming"Im other text</p>
<div class="Have">
<img src="3.png"/>
<p class="nice_day"></p>
</div>
</div>
</div>
Thanks
Option #1 - Add Selectively
This approach looks at the :hover state of the ancestor and only adds styles where desired.
Simple: http://jsfiddle.net/gF7Ju/2/
Multiple Elements: http://jsfiddle.net/gF7Ju/3/
CSS
/* just for formatting so we can see the boxes */
.hello {
border: 1px solid red;
}
.hello > div {
padding: 6px;
border: 1px solid silver;
}
/*
Selector(s) here to determine which element(s) should be impacted by the
parent's hover, and which should not.
*/
.hello:hover div:first-child {
background-color: yellow;
}
HTML
<div class="hello">
<div>Hover effect</div>
<div>No hover effect</div>
</div>
Option #2 - Cancel/Ignore Selectively
Depending on what properties should be modified on hover, you could apply the hover style to the ancestor and then restyle the children (e.g. setting background-color to white, even though the parent's hovered background is yellow).
I prefer the first approach where possible.
IF you want to keep styles of child elements on hover of parent element, you need to cancel the parent style like following
.hello{text-decoration: underline;}
.hello:hover img, .hello:hover .nice_day{text-decoration: none}
Note that we're setting text-decoration: none for the children elements, img; and .nice_day in case they get underlined when .hello is hovered.
you can set again your default css to p.nice_day :
div.hello:hover p.nice_day{
//your default css of .nice_day
}