I have some css lines that allow me to hide/show a div. I would like to have links in this div, but when I test the link, it ends up hiding the div, it does not actually follow the link.
So, I want to be able to show the content, click the link. The content should remain open, and the link should be followed. Hope this makes sense!
<p>some text I want to show</p>
[...]
[...]
<div id="list">
<p>bla bla, you should look on google</p>
</div>
css
.show {
display: none;
}
#list {
display: none;
}
.hide:focus + .show {
display: inline;
}
.hide:focus {
display: none;
}
.hide:focus ~ #list {
display: block;
}
I also made my first fiddle.
As always, any help is appreciated!
Using Javascript/Jquery
Jquery
jQuery(function($){
$('#hideme').click(function(){
$('#list').addClass('hidden')
$('#list').removeClass('expand')
})
})
jQuery(function($){
$('#showme').click(function(){
$('#list').addClass('expand')
$('#list').removeClass('hidden')
})
})
DEMO
Using Pure CSS
HTML
<p>some text I want to show</p>
<div>
[...]
[...]
<p id="list">bla bla, you should look on google</p>
</div>
CSS
.hide:focus + .show + #list{
display:none;
}
.show:focus + #list{
display:block ;
}
#list{
display:none;
}
DEMO
Related
I have a simple html/css toggle set up
#toggle1 {
display: none;
}
#toggle1:target {
display: block;
}
#toggle2 {
display: none;
}
#toggle2:target {
display: block;
}
Show1<br />
Show2
<p id="toggle1">1</p>
<p id="toggle2">2</p>
This works as desired by showing and hiding. However I want the initial paragraph to be visible upon page load. If I remove the #toggle1 {display: none;} it does not work properly.
Any assistance would be most helpful and appreciated.
Thanks in advance.
This is just a bit of a hack, but if you reverse the order of the hidden elements, add display:block to the "default" one and then add display:none to :target ~ #toggle1 it should simulate a default selected item:
#toggle1, #toggle1:target, #toggle2:target {
display: block;
}
:target ~ #toggle1, #toggle2 {
display: none;
}
Show1<br />
Show2
<p id="toggle2">2</p>
<p id="toggle1">1</p>
I know it can be done in JavaScript, however I am looking for solution in CSS.
I have three divs.
div#hide should be visible by default, #show should be hidden.
When I hover on #main, #hide should hide and #show should be visible.
div#show works fine but #hide doesn't hide when #main is hovered. How can we do it in css?
#show {
display: none
}
#main:hover + #show {
display: block
}
#main:hover + #hide {
display: none
}
<div id="main">
Hover me
</div>
<div id="show">
Show me on hover
</div>
<div id="hide">
Hide me on hover
</div>
Instead of + you want to use ~ combinator for hide element because + selects only next-sibling
#show {
display: none
}
#main:hover + #show {
display: block
}
#main:hover ~ #hide {
display: none
}
<div id="main">
Hover me
</div>
<div id="show">
Show me on hover
</div>
<div id="hide">
Hide me on hover
</div>
You just have to replace the + selector with ~ cause the #hide is not placed after #main
So your code is:
#show {display:none}
#main:hover + #show { display:block }
#main:hover ~ #hide { display:none }
You've to use tilda '~' for this case.
The difference between + and ~ is that ~ matches all following siblings regardless of their proximity from the first element, as long as they both share the same parent.
#show {display:none}
#main:hover + #show { display:block }
#main:hover ~ #hide { display:none }
Try something like this: "#main:hover + #show + #hide"
div#show {
display:none;
}
#main:hover + #show {
display:block
}
#main:hover + #show + #hide {
display:none
}
It's working for me.
I want to change the displayed image, when the curosor is hovering over the a tag with plain css
My guess was to write something like this, but it didnt work:
.folder a:hover > .folder img{
content: url(new picture);
}
here is my code
html:
<div>
<div class="folder">
<img></img>
folder1
</div>
...
</div>
css:
.folder img{
content:url(pictures/folderdarkblue.png);
}
It will be quite hard to do that using plain css with your current html code due to css not really allowing backward navigation. If you don't mind using the <a> after your image, you could try doing this:
https://jsfiddle.net/ksec65wm/
<div class="folder">
folder1
<img class='one' src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png"/>
<img class='two' src="http://www.w3schools.com/images/colorpicker.png"/>
</div>
CSS:
img.one {
display:none;
}
a:hover ~ img.one {
display: inline-block;
}
a:hover ~ img.two {
display:none;
}
Instead of trying to change picture on the hover of each individual div, why don't you try setting the opacity to 0, and then add the next picture?
Some hints
.box-container:hover .image-container,
.box-container:hover #picture {
opacity: 0;
}
Heres an example I found that is quite nice as well
https://jsfiddle.net/m4v1onyL/
The basic css goes as the following
a img:last-child {
display: none;
}
a:hover img:last-child {
display: block;
}
a:hover img:first-child {
display: none;
}
As you can see we just toggle between two images like this in an <a> tag.
I need to change #hidden to display:block when #aaa is hovered over. It's not working because #aaa isn't on the same level as #hidden - is there a way to manipulate a completely separate element on hover? I'm trying to make a CSS-based nav w/ a subnav and show the respective subnav when a nav item is hovered over.
HTML:
<div class="cheetahContainer">
<div id="cheetah">
<p>Cheetah</p>
</div>
</div>
<div id="hidden">
<p>A cheetah is a land mammal that can run up 2 60mph!!!</p>
</div>
CSS:
#cheetah {
background-color: red;
text-align: center;
}
a {
color: blue;
}
#hidden {
display:none;
color: orange;
}
#cheetah:hover{
background-color:green;
}
#cheetah:hover + #hidden {
display:block;
}
http://jsfiddle.net/LgKkU/575/
Since your link is not a sibling of your #hidden div (thus you can't use the immediate adjacency selector), you should change last rule with
.cheetahContainer:hover + #hidden {
display:block;
}
Hovering over an element can only affect child elements in css. Here's a fix for your example:
<div class="cheetahContainer">
<div id="cheetah">
<p>Cheetah</p>
</div>
<div id="hidden">
<p>A cheetah is a land mammal that can run up 2 60mph!!!</p>
</div>
</div>
However, I would recommend changing the css to something like this:
.cheetahContainer:hover .hidden {
display: block;
}
Changed out id's for classes and added hover to parent element so that hovering over the revealed text doesn't revert back to display:none;
It is not a direct sibling so you need to use js
Here is an example of what to do:
var $cheetah = document.getElementById('cheetah');
var $hidden = document.getElementById('hidden');
$cheetah.addEventListener('mouseover', function() {
$hidden.style.display = 'block';
});
$cheetah.addEventListener('mouseout', function() {
$hidden.style.display = 'none';
});
Or you can use the container:
.cheetarContainer:hover + #hidden {
display: block;
}
My code :
<div>
<div class='top-class'>
Header Name
</div>
<div class='body-class'>
This is body a
</div>
</div>
<div>
<div class='top-class'>
Another Header Name
</div>
<div class='body-class'>
Another body
</div>
</div>
css code I tried:
.top-class:hover + .body-class { display: block; } /* This is working */
But, I want that to happen when header is clicked. So, i tried this:
.top-class:visited + .body-class { display: block; } /* DIDNT work */
The pseudo class "active" seems to do the job
.top-class:active + .body-class { display: block; background-color: red; }
You can check my jsfiddle
You can use tabindex in you first div then it can have focus event on.
<div class='top-class' tabindex=1>Header Name</div>
Then in css you test focus pseudo class
.top-class:focus + .body-class { display: block; background-color: red; }
Check this jsfiddle