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.
Related
i have some child based hovering effect on my project.
My codes are
<ul>
<li>
<a href="">
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook"></i>
</a>
</li>
<ul>
so my css are
a i:first-child{
position: absolute;
top:0px;
}
a i:last-child{
position: absolute;
top:30px;
visibility:hidden;
}
when hovering on first child i want to take it top:-30px and visibility:hidden and last child to vice-versa
I have tried
ul.socials.jump a i:first-child:hover ul.socials.jump a i:last-child{
position: absolute;
visibility: visible;
top: 0%;
transition:all .4s ease;
}
but not working :(
If you want to modify both elements on hover, you will need two separate :hover rules.
One for the first child:
ul.socials.jump a i:first-child:hover {
visibility: hidden;
top: -30px;
}
And one for the last child, but to target the last child on first child hover, you don't need to repeat the first portion of your selector — just use a sibling combinator:
ul.socials.jump a i:first-child:hover + i:last-child {
visibility: visible;
top: 0%;
}
You don't need to redeclare position: absolute, and your transition ought to be declared on a i:first-child, a i:last-child and not on the hover state unless you expect the transition to only apply when the elements leave hover.
Actually, the hover is better served on the anchor tag.
a:hover i:first-child {
position:relative;
top:-30px;
}
a:hover i:last-child {
visibility:visible;
}
It's much more legible, and the hover is more likely to stay active even with the shifting position of the children.
It would also help if you added a class to the link and set its display to inline-block, such as
a.hoverchild { display:inline-block }
That causes the 'blank' space inside the link to be hoverable as well, so that when the children move, the cursor (being inside the link's block, still) is still keeping the :hover active.
If you're trying to do what I think you're trying to do, you might actually be better off using float:left like this:
a.hoverchild {
display:inline-block;
}
a.hoverchild:hover i {
position:relative;
float:left;
clear:left;
visibility:visible;
}
Here's a fiddle to demonstrate.
Hello i think you can use sibling option in css using "~" sign to solve this problem.
Check out following JSfiddle to see your requirement
Here is my code.
<div class="start">start</div>
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
...................
...................
<div>middle-n</div>
<div class="end">end</div>
I want to apply css to all div's when mouse hover the first div with class start.
With the current HTML structure you can use couple of sibling selectors for this.
.start:hover ~ div {
color: red; /* styles you want to apply */
}
/* reset styles back for all other divs after .end */
.start:hover ~ .end ~ div {
color: inherit;
}
Demo: http://jsfiddle.net/3c6V6/1/
However I would recommend to change HTML structure if you can. For example:
<div class="start">start</div>
<div class="middles">
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
<div>middle-n</div>
<div class="end">end</div>
</div>
<div>after-1</div>
<div>after-2</div>
and CSS:
.start:hover + .middles > div {
color: red;
}
You would just have much more flexibility.
Demo: http://jsfiddle.net/3c6V6/2/
Could it be as simple as putting a parent container around it, and putting the hover on that, or do you wish to single out some of the siblings directly?
In this case, try putting :hover on the parent container like this:
.parent:hover div {/*style*/}
This is for your second version found in the comments: JSFiddle DEMO
div.start:hover~div.middles div:not(.end) {
font-weight: bold;
}
(This is for your original question):
div.start:hover~div:not(.end) {
font-weight: bold;
}
JSFiddle DEMO
This is where I found the information to do it. Didn't know there were so many CSS selectors.
Is it possible to have an image hidden by default and unhide it on :hover? I tried using the visibility property, but invisible elements can't be hovered on.
If you use display or visibility, the element is not there so you can't hover over it. Try it with opacity:0; . You can do it with css:
.img { opacity:0; }
.img:hover { opacity:1; }
I realize that you specifically asked about jquery, but it is possible to do what you're asking just with css, though you may have to use opacity:0 rather than display:none to hide the image.
You can use a css hover event. Start by applying a class to your image:
<img src="theimage.jpg" class="hidden-image"/>
In your css, you can then use the class and a css hover event to show the image when the cursor is over the image:
.hidden-image {
opacity: 0;
}
.hidden-image:hover {
opacity:1;
}
Here's a jsfiddle: http://jsfiddle.net/fZd7J/
Directly you can't mouseover/hover a hidden image that is, its not possible with visibility:hidden; or display:none;, but you can have some tricks to do that.
using css
apply opacity: 0; to the image and :hover change opacity:1;
using js
create a parent <div> to the image and mouseover to that div apply display:block; to image.
Working Fiddle Click here
I want to see 2nd div when mouse Over.
HTML
<a>Hover over me!</a>
<div class="ab">Some content</div>
<div class="abc">Some text here</div>
CSS
.abc {
display: none;
}
a:hover + .abc{
display: block;
}
The adjacent sibling combinator is not exactly what you want. It can only select the div with the class .ab, because it's directly following the anchor.
What you want is this:
a:hover ~ .abc {
/*...*/
}
This selects every .abc which is following a hovered anchor element, but it don't has to be directly before it.
Had some delay reaching SO so this is late. Here a fiddle for my answer: http://jsfiddle.net/digitalextremist/F5k4L/
The main issue here uses #kleinfreud's suggestion about an adjacent div but weaves in another approach to showing and hiding a div:
.abc {
opacity: 0;
}
a:hover ~ .abc{
opacity: 100;
}
This makes sure the space that div will take up is reserved to begin with, then showing it when needed.
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;
}