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();
});
Related
This is my code:
.fontmenu .fontlist{
position: absolute;
bottom:30px;
display:none;
}
.fontbutton button:hover .fontmenu .fontlist{
display:block;
}
<div class="fontmenu">
<div class="fontbutton">
<button>fonts</button>
</div>
<div class="fontlist">
<div onclick="font(1)">Arial</div>
<div onclick="font(2)">Courier</div>
<div onclick="font(3)">Verdana</div>
<div onclick="font(4)">sans</div>
</div>
</div>
The CSS is not working. The list is not visible when I hover the button. I want to know whether the .fontbutton button:hover .fontmenu .fontlist{} is valid or not.
This is what you have used:
.fontbutton button:hover .fontmenu .fontlist{ }
This won't work
Why it won't work? Read on. I will explain. But first, lets see what will work.
Lets try using some selectors:
.fontbutton:hover + .fontlist {}
This WILL work
Let's see it in action:
.fontmenu .fontlist {
bottom: 30px;
display: none;
}
.fontbutton:hover + .fontlist {
display: block;
}
/* No need to include the wrapper fontmenu div,
just target the siblings, ie, fontbutton and fontlist.
The + selector must be used, otherwise, the browser will
think fontlist is the child of fontbutton */
<div class="fontmenu">
<div class="fontbutton">
<button>fonts</button>
</div>
<div class="fontlist">
<div onclick="font(1)">Arial</div>
<div onclick="font(2)">Courier</div>
<div onclick="font(3)">Verdana</div>
<div onclick="font(4)">sans</div>
</div>
</div>
Notice that the list becomes visible even if we hover to the right of the button. This is happening since we are targeting the div fontbutton and not the <button> element. So, the browser makes the list visible when we hover the div and not the button.
How to fix?
We need to change the html a little.
.fontmenu .fontlist {
display: none;
}
button:hover + .fontlist {
display: block;
}
<div class="fontmenu">
<button>fonts</button>
<div class="fontlist">
<div onclick="font(1)">Arial</div>
<div onclick="font(2)">Courier</div>
<div onclick="font(3)">Verdana</div>
<div onclick="font(4)">sans</div>
</div>
</div>
Look that I removed the .fontbutton class and made the <button> a sibling of .fontlist. So, now, you can see that the list is visible only when we hover the button.
Now you would say I could just add some selectors to your css. But I didn't because there's no way you could target <button> and then move down to .fontlist which is in a separate div.
.fontbutton > button:hover ? .fontmenu > .fontlist{ }
We will have a problem at the place of ?.
First, we need to go down to .button.
Move up to .fontbutton.
Add a + selector and switch to .fontmenu.
Move down to .fontlist.
After we move down to .button, we can't go up again to .fontbutton.
CSS doesn't have something like parent selector.
So, clearly, we can't use it that way.
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.
This question already has answers here:
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Is there a CSS parent selector?
(33 answers)
Closed 3 years ago.
When I'm nesting my checkboxes in a <div> element my code stops working. I need images to display upon checking a certain checkbox. Code works without nesting the checkboxes in a <div>.
I want my checkboxes to be nested in a <div> so that it changes the display value from none to inline-block in the <div> with the images upon selecting a certain checkbox.
I've tried everything but I think I just can't get my head around this problem.
<body>
<style>
input[type=checkbox]:checked.ivo ~ div #fotoivo {
display: inline-block;
}
input[type=checkbox]:checked.ian ~ div #fotoian {
display: inline-block;
}
input[type=checkbox]:checked.non ~ div #fotonon {
display: inline-block;
}
#fotoivo {
width: 200px;
display: none;
}
#fotoian {
width: 200px;
display: none;
}
#fotonon {
width: 200px;
display: none;
}
</style>
<!--Checkboxes (works without the <div> wrapped around)-->
<!--<div>-->
Ivo: <input type="checkbox" name="ivoian" class="ivo">
Ian: <input type="checkbox" name="ivoian" class="ian">
Non-binair: <input type="checkbox" name="ivoian" class="non">
<!--</div>-->
<!--Images that should change from display: none to inline-block.-->
<div>
<img id="fotoivo" src="ivo.jpg" alt="#">
<img id="fotoian" src="ian.jpg" alt="#">
<img id="fotonon" src="non.jpg" alt="#">
</div>
</body>
Tilda (~) is sibling selector. When you nest the inputs, the div wrapping images isn't their sibling anymore. As CSS doesn't have parent selector, you aren't able to do it with only css. But of course, you can do it with simple JS.
You can do something like this: https://stackoverflow.com/a/7691692/11404579
Edit: also, there is little bit hacky way to do it with just CSS, but you will lose the native inputs. You can place the inputs in root element, so you can select the images with sibling selector and hide the inputs. And in some nested element place labels for those hidden inputs. This way, when you click on (nested) label, you check the input a can control the content.
I am trying to have a checkbox change the content of a div but if the content isn't together (in the same div), then it will not work.
HTML:
<div>
<input type="checkbox" id="check">
<label for="check">Hello</label>
</div>
<div class="check"></div>
CSS:
.check:before {
display: block;
width: 100px;
height: 100px;
background: red;
content:'';
}
input:checked ~ .check:before {
content:'Content';
}
JSFiddle: https://jsfiddle.net/pgkwn4j6/
In your example one thats working is using "input:checked ~ .check:before" which selects "check" class div that is preceeding right after the input that is checked(sibling elements).
When you the put the label and input in a different div tag you need to select parent`s sibling which is not possible through css.
You can do it through Jquery.
CSS: how to select parent's sibling
above question showcases very similar problem you are having.
It does not work because it is not in the same div, in css you can not manipulate any element outside the parent element. To be able to manipulate an element outside you have to use jquery. Here your JSfiddle correct link:
JSFiddle Correct
$(document).ready(function(e) {
$('input#check').click(function(){
$('.check').toggleClass('show-content');
});
});
I want solution using only CSS
we have 3 circle here.
Whenever I perform mouse-over on circles with class Name Mycircle , the circle with class Name BigCircle should change to red color
html
<div class="BigCircle"></div>
<div class="mycircle"></div>
<div class="mycircle"></div>
CSS
.mycircle,.BigCircle{width:50px; height:50px; border-radius:30px; background-color:grey; margin:3px}
.mycircle:hover{background:yellow}
.mycircle:hover .BigCircle{background:red}
Here is the demo >http://jsfiddle.net/JGbDs/4/
Thanks in Advance
In your comments you state that you cannot re-arrange the elements, but you can add ones if required.
For that reason the general sibling combintor in the accepted answer is not suitable as the .bigCircle element would have to come after all of the .myCircle elements.
There is no perfect way of achieving this using only CSS but it is possible by adding a "parent" element and using one of the following CSS solutions:
Solution 1
When hovering on the parent element, the .bigCircle child element will be coloured red:
Working example: http://jsfiddle.net/CKRef/
HTML
<div class="parent">
<div class="bigCircle"></div>
<div class="mycircle"></div>
<div class="mycircle"></div>
</div>
CSS
/* Add float to parent to fit width to content */
.parent {
float: left;
clear: both;
}
.parent:hover > .bigCircle{
background: red;
}
The issue with this solution is that the .bigCircle element will be coloured red when you hover anywhere on the parent, not just on .myCircle. Adding the float reduces this effect - but if you hover just outside of the circle then the .bigCircle will still be red.
Solution 2
Using the parent element as a relative container, we can add a new element to the page using the after pseudo selector when a .myCircle element is hovered over:
Working example http://jsfiddle.net/CKRef/1/
HTML
<div class="parent">
<div class="mycircle"></div>
<div class="mycircle"></div>
<div class="mycircle"></div>
</div>
CSS
/* replaced .bigCircle with mycircle:hover::after */
.mycircle, .mycircle:hover::after {
....
}
.parent {
position: relative;
}
.mycircle:hover::after {
content: "";
background-color: red;
position: absolute;
top: 0;
left: 0;
margin-top: 0;
}
The imperfection with this solution is that we are targeting the position of the first child of the parent element, rather than the element with the class name .bigCircle. Also, the after pseudo selector is not supported in IE7.
No. That's not possible using just css. "Any sibling" selector is not there in css.
However, if you can move BigCircle to end, you can use general sibling combinator which can select successor siblings.
.mycircle:hover ~ .BigCircle{background:red}