This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 6 years ago.
I have two images inside a div. When the user hovers over the second image, the first one's opacity should go to 40%. I problem is that I cannot select img.first when img.second is being hovered over. I have tried looking into the general sibling selector, but that seems to only select the elements that come after your initial selector.
I know this can be done with jQuery, but I'm wondering if there is a pure CSS solution?
<div>
<img class="first" src="#">
<img class="second" src="#">
</div>
div > img.second:hover ~ img.first { opacity:0.4; filter:alpha(opacity=40); } //failed
I have tried looking into the general sibling selector, but that seems to only select the elements that come after your initial selector.
That is correct. As such, with a pure CSS selector this isn't possible.
However, depending on your layout, you may be able to use multiple rules with selectors such as div:hover and img:hover and play with opacity values to get at what you want; see the other answers for examples. But if you want a more foolproof solution you'll be better off with jQuery.
try something like:
div:hover .img {
opacity: 0.4;
}
div .img:hover {
opacity: 1;
}
.img {
display: inline-block;
background: green;
width: 100px;
height: 40px;
}
demo: http://jsbin.com/idowoz/2/
Try this css:
div:hover img{
opacity:0.5
}
div:hover img:hover{
opacity:1
}
Test: http://jsfiddle.net/WpCtL/2/
You can do a trick to make it seem like this is what is happening: http://jsfiddle.net/cwxCX/3/
<div>
<img src="http://placekitten.com/200/200">
<img src="http://placekitten.com/300/300">
<img src="http://placekitten.com/400/400">
<img src="http://placekitten.com/500/500">
</div>
CSS
div{
float:left;
}
img{
width:100px;
height:100px;
}
div img{
float:right;
}
div img:hover ~ img{
opacity:.4;
}
Related
I have tried with like below which I searched from stackoverflow , but not working yet ! This is doing on riot.js so I link what I tried here .
I want to show .overlay div when hover on #over arrow down button but no display yet .
#over:hover + .overlay {
opacity:1;
}
#over:hover > .overlay {
opacity:1;
}
#over:hover ~ .overlay {
opacity:1;
}
None of those selectors work because div.overlay is neither a descendant nor a sibling to div#over.
To do what you want - with pure CSS, you would need to change the HTML structure a bit - in order to make the two div's siblings.
For example, adding div.overlay next to div#over would do the trick:
<h3>{Now} {opts.title}
<div id='over'>^</div>
<div class='overlay'>
<li>Editable</li>
</div>
</h3>
This would require following CSS rule:
#over:hover + .overlay {
opacity:1;
}
But this would require you to adjust the absolute position of div.overlay. I am leaving that to you.
Here's the updated plnkr: http://plnkr.co/edit/nSNn1t0Lpuw9uUZQ1N8h?p=preview
You need to change your HTML structure to achieve this in CSS and use ~ general sibling selector, like:
In HTML:
<div id='over'>^</div>
<div class='overlay'>
<div>Editable</div>
</div>
In CSS:
#over:hover ~ .overlay {
opacity: 1;
}
Have a look at the updated Plunkr.
Hope this helps!
Because two divs location are mixing up.. in mouse in/mouse out function.
try changing your css style of .overlay .
In CSS:
.overlay {
position:absolute;
background:#000;
color:white;
list-style-type:none;
right:30px;
top:18%;
opacity:0;
}
working example here: Plunkr.
also your css style float:right on #over may be problem of your mouseover function only work when u point very right of your div.
I have a situation in which i want to change the color of my box with the on hover from the container i which this box is found.
I found out how to do this through a different question here on stackoverflow How to affect other elements when a div is hovered
But now i want to change the color of my box to a third option when i hover the box itself.
This is and exaple html with css.
<body>
<div class="container">container
<div class="box">
box</div>
</div
</body>
</html>
and the css.
.container{
background-color:grey;
height: 100px;
width:100px;
}
.container:hover .box{
background-color: aqua;
}
.box{
background-color: blue;
width:50px;
height: 50px;
}
.box:hover{
background-color: white;
}
This is the way i tried to do it but this does not work. The first steps works but i can't get the third color.
Simply change
.box:hover{
background-color: white
}
TO
.container:hover>.box:hover{
background-color: white
}
And try it here: http://jsfiddle.net/czmzxd6j/
You'll have to create a more specific selector.
You're setting .container:hover .box {...} which is more specific than .box:hover.
Your issue will be resolved if you use .container:hover .box:hover {...} because this is more specific than the one with just the .box at the end.
Using the direct-child selector isn't the way nor is !important (sorry guys, no offence but it's just not the correct approach here.)
CSS is all about overwriting and that is why these things can be nasty sometimes.
Whenever something doesn't get applied correctly just think to yourself for 3 seconds: "Are there any other selectors that manipulate this element that could be more specific?".
With the general selector .box:hover any box anywhere in the DOM will have that hover as long as it has the .box class however this is not true for the other selector including .container:hover .box:hover.
That selector is actually more specific due to the fact that now only .box elements within the .container elements get the hover.
By specifying the general selector instead of one that is atleast as specific it will simply be overwritten by the more specific one, that's why you need to re-add .container:hover to the selector.
I hope it makes sense to you.
Good luck!
try this:
.box:hover{
background-color: white !important;
}
you can see it here: https://jsfiddle.net/fusg2o3f/
I'm trying to enlarge an image when hovering over it as well as showing a div with text while hovering over that image. The enlarging works, but showing the other div doesn't.
<div id="punt1">
<div id="puntnaam1" class="puntnaam">Ieplaan</div>
<img class="punt"src="ieplaan1.jpg">
</div>
For CSS I used:
.punt{
height: 100px;
width: 100px;
}
.puntnaam{
display: none;
}
.punt:hover{
transform: scale(3);
}
.punt:hover .puntnaam{
display: block;
}
What am I doing wrong?
You can't select previous siblings or parent elements in the DOM with CSS. You can only select next siblings or child elements.
e.g., if you changed your code to this:
<div id="punt1">
<img class="punt"src="ieplaan1.jpg">
<div id="puntnaam1" class="puntnaam">Ieplaan</div>
</div>
Then your selector could look like this:
.punt:hover + .puntnaam{
display: block;
}
Because now the <div> is the next sibling after <img>
See: Is there a "previous sibling" CSS selector?
You cant do something like that
.punt:hover .puntnaam{
display: block;
}
its not working that way in CSS cause puntnaam is already hidden,
You can use simple jQuery code to solve it
$(".punt").hover(function() {
$("#puntnaam1").show();
});
So is it possible to make this work
#element img:hover #otherelement {...}
like
#element:hover #otherelement {...}
it's important for img to stay specified, because images are automatic in what I'm making.
As img cannot hold any other nested tag, I assume you are targeting the adjacent element, you can use adjacent selector here using +
#element img:hover + #otherelement {...}
The above selector will select the element next to img tag when the image is hovered.
Note: Above selector will work only if you've your markup like
<div id="element">
<img src="#" />
<div id="otherelement"></div >
</div >
But will fail if you've markup like
<div id="element">
<img src="#" />
</div >
<div id="otherelement"></div >
What you can do is selecting next element(s) by:
Adjacent sibling combinator
element1 + element2 Selects every element2 element that are placed immediately after element1 element(s). They're siblings.
#element img:hover + #otherelement
If the #otherelement is placed right after img, it'll be selected when img is hovered.
Another option is:
General sibling combinator
element1 ~ element2 Matches occurrences of element2 that are preceded by element1 while they have the same parent. They're siblings too, but element2 doesn't have to be immediately preceded by element1.
#element img:hover ~ #otherelement
If #otherelement and img are siblings, and #otherelement is placed somewhere after the img, it'll be selected when img is hovered.
Here is an example
HTML
<div id="parent">
<img src="http://lorempixel.com/200/200/" alt="Sport">
<div class="text">This is a text.</div>
</div>
CSS:
#parent {
overflow: hidden;
width: 200px;
height: 200px;
}
.text {
position: relative;
-webkit-transition: .3s all;
-moz-transition: .3s all;
transition: .3s all;
background-color: rgba(255,255,255,.5);
height: 40px;
line-height: 40px;
}
#parent img:hover + .text {
top: -40px;
}
What your first selector is looking for is something called #otherelement inside an image. Images can't have child elements.
If the element is a sibling of the image, you might want to try img:hover~#otherelement or img:hover+#otherelement.
Yes it is, try:
#element:hover + #otherelement {...}
or
#element:hover ~ #otherelement {...}
You can use the :hover pseudo class on any element. There are considerations to be made in regards to cross-browser. You can use a polyfill like Selectivizr for that, though.
As for your question, you might want to consider targeting a shared ancestor for both elements you are trying to target with the hover and apply your styles that way.
I want to change another element property on hover of a element. So far I've I came up with the following CSS:
#test3:hover #test4
{
background-color: red;
}
<div id="test3">three</div>
<div id="test4">four</div>
However, this is not working. Is this possible at all? What would you suggest?
#test3:hover #test4
This means, target an element test4 that is a child of test3. You want the + sibling selector instead:
#test3:hover + #test4
{
background-color: red;
}
Browser compatibility table