I found a code to show and hide content. It is a very easy code but the content disappears even if you click on the content in the box. There is no js just CSS. Please help me fix this problem.
.span3:focus~.alert {
display: none;
}
.span2:focus~.alert {
display: block;
}
.alert {
display: none;
}
<span class="span3" tabindex="0">Hide Me</span>
<span class="span2" tabindex="0">Show Me</span>
<p class="alert">Some alarming information here</p>
Add focus/hover state to the alert also:
.span3:focus~.alert {
display: none;
}
.span2:focus~.alert {
display: block;
}
.alert {
display: none;
outline: none;
}
.alert:focus,
.alert:hover /*the hover is mandatory in this case*/{
display: block;
}
<span class="span3" tabindex="0" >Hide Me</span>
<span class="span2" tabindex="0">Show Me</span>
<p class="alert" tabindex="0">Some alarming information here</p>
UPDATE
If you want to keep the alert always visible until you click on hide me, you can try this:
.span3 {
position:relative;
z-index:1; /*Make it above the alert*/
}
.span3:focus~.alert {
display: none;
}
.span2:focus~.alert {
display: block;
}
.alert {
display: none;
outline: none;
}
.alert:focus,
.alert:hover /*Here the hover is mandatory*/{
display: block;
}
/*Cover the whole screen and keep the hover on the alert*/
.alert:after {
content:"";
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
}
<span class="span3" tabindex="0" >Hide Me</span>
<span class="span2" tabindex="0">Show Me</span>
<p class="alert" tabindex="0">Some alarming information here</p>
Do you need to click on the div and rather not pass on it? In this case, hover can be a good solution. Look at that code:
Demo here
.span3:focus ~ .alert {
display: none;
}
.span2:focus ~ .alert {
display: block;
}
.alert {
display: none;
}
.alert:hover {
display:block;
}
<span class="span3" tabindex="0">Hide Me</span>
<span class="span2" tabindex="0">Show Me</span>
<p class="alert" >Some alarming information here</p>
Have a good day.
Related
I have the following issue.
In a demo part I have the code below:
<style>
.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }
.text.prijsa:hover ~ .manImgA { display: block; }
.text.prijsb:hover ~ .manImgB { display: block; }
.text.prijsc:hover ~ .manImgC { display: block; }
</style>
<div class="manImgA">
<img src="url-to-image-1">
</div>
<div class="manImgB">
<img src="url-to-image-2">
</div>
<div class="manImgC">
<img src="url-to-image-3">
</div>
<p class="text prijsa">Standard size</p>
<p class="text prijsb">Big size</p>
<p class="text prijsc">Very big size</p>
When you move the mouse cursor over one of the text paragraphs an image should appear. That will work if I replace the paragraphs above the code with the images.
But when I put in the structure like I showed above it doesn't work.
I tried to find answer online why it doesn't work... I post my question here because I didn't fine a clear answer.
Maybe this is what you are looking for?
Anyway siblings selector is for element that come after not before.
.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }
.text.prijsa:hover ~ .manImgA { display: block; }
.text.prijsb:hover ~ .manImgB { display: block; }
.text.prijsc:hover ~ .manImgC { display: block; }
<p class="text prijsa">Standard size</p>
<p class="text prijsb">Big size</p>
<p class="text prijsc">Very big size</p>
<div class="manImgA">
<img src="https://dummyimage.com/300x300/000/fff&text=ONE">
</div>
<div class="manImgB">
<img src="https://dummyimage.com/400x400/000/fff&text=TWO">
</div>
<div class="manImgC">
<img src="https://dummyimage.com/600x600/000/fff&text=THREE">
</div>
If you want only with pure css,you must change pure css:
.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }
.text:hover + div { display: block; }
<p class="text prijsa">Standard size</p>
<div class="manImgA">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA">
</div>
<p class="text prijsb">Big size</p>
<div class="manImgB">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w">
</div>
<p class="text prijsc">Very big size</p>
<div class="manImgC">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeY54SaYkaOxxyXlu_ng21EMIBZvJjnZBNQAOsIh_0_6Tvu9et">
</div>
The tilde ~ targets siblings which follow in the HTML markup order...
A ~ B = target B if and only if it follows A
To employ this feature of CSS in your example use something like this in your stylesheet...
/* hide all divs with a class
which begins with 'manImg' */
div[class^=manImg] {
display:none;
}
/* show div when p.prijs* element hovered */
p.prijsa:hover ~ div.manImgA,
p.prijsb:hover ~ div.manImgB,
p.prijsc:hover ~ div.manImgC {
display:block;
}
Hope that helped. :)
I tried to display a picture when you hover on a span-tag. I looked it up on the internet, but what I found didn't work. I now ended up with this code:
<span style="display:inline-block;">
<img class="manImg" src="_src/mypicture.jpg">
</span>
...and the question is where to put the 'hoverable' text. When I hover on that text it will show the image.
img { display: none; }
.parent:hover img { display: block; }
Example
You can do this by css only.
<span class="container">
<p class="hover-text">Hover text here</p>
<img class="manImg" src="_src/mypicture.jpg">
</span>
.container {
display: inline-block;
}
.manImg {
display: none;
}
.hover-text:hover ~ .manImg {
display: block;
}
You can do it using JavaScript on onmouseover event.
<span style="display:inline-block;" onmouseover="your javascript code">
Here is one way you can do it:
function mouseIn() {
$('.img').addClass('show');
}
function mouseOut() {
$('.img').removeClass('show');
}
$('.hover-me').hover(mouseIn, mouseOut);
.img {
display: none;
}
.img.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="display:inline-block;">
<p class="hover-me">hi</p>
<img src="http://static.ddmcdn.com/en-us/apl/breedselector/images/breed-selector/dogs/breeds/australian-shepherd_01_sm.jpg" class="img">
</span>
This takes advantage of JQuery's hover. The image is hidden by default. When your mouse hovers over the text, I add a class to show the image. When your mouse stops hovering, I remove the class to hide the image again.
I created a simple input type file placeholder like this:
input[type="file"] {
display: none;
}
.image .first {
display: none;
}
.image .second {
display: block;
}
.image:hover .first {
display: block;
}
.image:hover .second {
display: none;
}
<div class="image">
<input type="file" id="file-input" />
<label for="file-input">
<div class="first" style="height: 40px;background-color: red;"></div>
<div class="second" style="height: 40px;background-color: blue;"></div>
</label>
</div>
Whenever, I hover over the .image element I need to display .first and hide .second. This is happening successfully if I don't click on the file-input label.
However, when click on file-input label, the hover state persists(the red div shows) even after navigating away.
Here's a pen.
I'd like to create a program where in:
* When you click Span 1, Span 2 will be displayed and Span 1 will be disabled.
* When you click Span 2, Span 1 will be displayed and Span 2 will be disabled.
This is my codes and I think it's strange. Your help is greatly appreciated.
CSS
body {
display: block;
}
.span1:focus ~ .span2 {
display: none;
}
.span2:focus ~ .span1 {
display: block;
}
HTML
<span class="span1" tabindex="0">Span 1</span>
<span class="span2" tabindex="0">Span 2</span>
Use this css below:
body {
display: block;
}
.span1:focus{
color:gray;
}
.span2{
color:gray;
}
.span1:focus ~ .span2 {
display: inline-block;
color:black;
}
.span2:focus{
color:gray;
}
.span2:focus ~ .span1 {
color:black
}
Check the jsfiddle demo
This problem can not be solved by Pure CSS and HTML , the answer can be found by javascript.
<span class="span1" tabindex="0" onclick="span1Clciked()">Span 1</span>
<span class="span2" tabindex="0" onclick="span2Clicked()">Span 2</span>
and on javascript
<script>
function span1Clicked(){
var x = document.getElementsByClassName("span2").item(0);
x.style.visibility='hidden';
// other stuff
}
function span2Clicked(){
var x = document.getElementsByClassName("span1").item(0);
x.style.visibility='hidden';
// other stuff
}
</script>
Could be accomplished easily and with more flexibility in JavaScript. Example in jQuery:
$('span').click(function() {
$(this).css('visibility','hidden').siblings().css('visibility','visible');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="span1" tabindex="0">Span 1</span>
<span class="span2" tabindex="0">Span 2</span>
my function is hide and show div with pure css but when i click open, the button still not disappear.
Open
<div id="show">
some text...
Close
</div>
and the css look like:
<style>
#show {display: none; }
#show:target { display: inline-block; }
#hide:target ~ #show { display: none; }
<style>
when i add this :
#show:target ~ #open { display: none; }
the button #open still not hiding
anyone can help me.
thanks before :)
You could solve it by putting your Open link inside the #show div
jsFiddle
HTML
<div id="show">
Open
<div id="content">
some text...
Close
</div>
</div>
CSS
#content {
display: none;
}
#show:target #content {
display: inline-block;
}
#show:target #open {
display: none;
}
The click functionality can be implemented using Checkbox for pure css. I modified your HTML as follows:
HTML
<input id="checkbox" type="checkbox" class="checkbox" />
<label id="open" for="checkbox" class="btn btn-default btn-sm"> <span class="show-text"></span>
</label>
<div id="show">some text...
<label for="checkbox" class="second-label btn btn-default btn-sm">Close</label>
</div>
CSS
:checked ~ .btn-default, #show, .checkbox {
display: none;
}
:checked ~ #show {
display: block;
}
.show-text:after {
content:"Open";
}
:checked + .show-text:after {
content:"";
}
.second-label, .show-text {
text-decoration: underline;
cursor: pointer;
}
Working Fiddle
Mr_Green Thank you for that code. I modified it for a responsive expanding menu on mobile devices
HTML
<input id="menu-toggle" type="checkbox" class="checkbox-toggle" />
<label id="open" for="menu-toggle" class="btn btn-default">Menu</label>
<div id="show">
Some Content
</div>
CSS
#media (max-width: 650px) {
input.checkbox-toggle + label {
display: block;
padding:.7em 0;
width:100%;
background:#bbbbbb;
cursor: pointer;
text-align:center;
color:white;
Text-transform:uppercase;
font-family:helvetica, san serif;
}
input.checkbox-toggle:checked + label {
background:#6a6a6a;
}
#show {
display: none;
}
input.checkbox-toggle:checked ~ #show {
display: block;
}
}
input.checkbox-toggle {
display: none;
}