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.
Related
I know how to display one div when you hover over another using the CSS:
.showme {
display: none;
}
.showhim:hover .showme {
display: block;
}
<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>
But the new div is displayed underneath the hover div.
How can i have a div that when you hover it, displays another div that may be somewhere else on the page e.g above the hover one.
Rather than it displaying under the hover div.
If your HTML still looks like
<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>
In that case, you can just assign an absolute or fixed position to the div with class showme and still use the same CSS.
If the showme div cannot be a child of the showhim div, then you can try placing it as a sibling.
<div class="showhim">HOVER ME</div>
<div class="showme">hai</div>
Once that is done, you can modify your CSS in the following manner
.showme {
display: none;
}
.showhim:hover ~ .showme {
display: block;
}
The ~ can be used to select sibling elements that appear after the current element.
You can do something like this:
.showhim{
margin-top:50px;
}
.showme {
display: none;
}
.showhim:hover .showme {
display:block;
border:1px solid red;
position:absolute;
top:0;
left:0;
font-size:25px;
}
<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>
If Javascript is an option, you can easily toggle the display property like this:
var showmeElement = document.getElementsByClassName('showme')[0];
function toggleSibling(shouldShow) {
if(shouldShow) {
showmeElement.style.display = 'block';
} else {
showmeElement.style.display = 'none';
}
}
.showme {
display: none;
}
<div class="showme" onmouseover="toggleSibling(true)" onmouseout="toggleSibling(false)">B</div>
<div class="showhim" onmouseover="toggleSibling(true)" onmouseout="toggleSibling(false)">A</div>
Otherwise, with CSS, the only way to target showme using showhim is by sibling / children selectors, with showhim being higher in hierarchy (children) or simply higher in DOM (as siblings).
Keep in mind that CSS can not go upwards in DOM in order to style elements conditionally, but only downwards.
Basically you want to shift the child div above its parent when the parent is hovered. If you know about positioning then you can use it. If you don't know then follow this code snippet.
div{
height: 30px;
}
.parent:hover .child{
position: relative;
bottom: 30px;
}
.parent:hover + .brother{
position: relative;
left: 30px;
}
<div class="parent">
hoverme
<div class="child">hi</div>
</div>
<div class="brother">brother</div>
Here I assigned the child a relative position which allows you to move it relative to its current position and bottom property pushes it above 30px. Here if you don't want any overlapping then you will have to keep account for the height of parent or in this case parent div. relative position will be better then absolute. Also sibling movement is possible and is shown in the css.
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.
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.
I am hiding a div with the class .text with
div.text{
visibility:hidden;
}
This div is surrounded by another div with the class .col3
<div class="col3">
<div class="image-box">
<div class="text"> test </div>
</div>
</div>
I want the visibility to change to "visible" when i hover col3
i tried
.col3:hover + div.text {
visibility:visible;
}
however it doesnt seem to work this way.
strange thing is , when i do
.image-box:hover + div.text{
visibility:visible;
}
It does show the text div when i hover the image box, but thats not what i want, i want it to show when i hover the surrounding div......
any help is welcome...
This should work:
.col3:hover div.text {
visibility:visible;
}
The use of the + selector is incorrect as it targets elements directly following the first element. More information can be found here.
+ in CSS is known as an "adjacent sibling combinator". A sibling is an element which is contained within the same parent as another element. In this case, your .image-box element is a sibling of your .text element. Both of these elements are children of your .col3 element. Your first selector will not select anything as .text isn't a sibling of .col3.
You'll need to use either a descendant combinator:
.col3:hover div.text {
visibility: visible;
}
Or a child combinator:
.col3:hover > div.text {
visibility: visible;
}
The reason why your
.col3:hover + div.text
Isn't working is because you're using an adjacent selector. What you're basically saying is "Take any div-node with the class text, that is lying on the same level as .col3, and do something with it when .col3 is hovered". But there isn't any. The div.text is not on the same level as .col3, but a direct child of it.
What you want to do is:
.col3:hover > div.text {
visibility:visible;
}
Which says "Take any div.text which is a direct child node of .col3, and do something with it, when .col3 is hovered".
How do I delete the background of my last DIV using class="item"?
Parent is: <div id="lastQuestions"></div>
jsfiddle
.item:last-child {
background-color: inherit;
}
Use pseudo element last-child
Here is a working jsfiddle
Alternatively, you could use a different html tag (like span, p or li displayed as block) for the.item elements instead of div to differentiate them from other div elements, and then you can do something like:
#lastQuestions li:last-of-type {
background: none;
}
to select it.
quick illustration
Edit:
Since, according to your jsfiddle, only .item elements are of type div in your code they already differ in type from all other children of #lastQuestions. So you can just try this:
#lastQuestions > div:last-of-type {
background: none;
}
DEMO