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>
Related
I have a problem to change <span> in CSS without changing anything on <span class="something">
HTML
<span class="something">Some text</span>
<span>Another text</span>
CSS
span.something {
color: #FFF;
}
span {
display: block;
}
I'm expecting that all other <span> will have the style of display:block except for <span class="something">. Appreciate if anyone could help me on this. Thanks!
I think you are looking for the :not selector which you can use as
span:not(.something) {
display: block;
}
The css negation pseudo-class is what you want.
span.something {
color: #FFF;
}
span:not(.something) {
display: block;
}
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.
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'm trying to make text appear below an image when it is being hovered upon, but can't get the syntax right. I'm beginning to learn CSS, so I may not be following the best practices, please point out how I can solve my problem better!
<div class="X">
<span class="Y">
<a href="XYZ">
<span class="A"></span>
</a>
<span class="A-element">A</span>
</span>
<span class="Y">
<a href="XYZ">
<span class="B"></span>
</a>
<span class="B-element">B</span>
</span>
</div>
My CSS looks like this:
.X {
font-size: 5em;
}
.Y {
margin-left: 0.5em;
margin-right: 0.5em;
}
.A-element {
display: none;
}
.B-element {
display: none;
}
.A {
color: #fff;
}
.B {
color: #fff;
}
.A:hover .A-element {
color: #ccc;
display: block;
}
.B:hover .B-element {
color: #ccc;
display: block;
}
Hovering over .A to change the style of .A-element isn't possible with CSS because to do this we'd have to first select the parent of .A, and CSS has no parent selector.
What is possible, however, is to instead place the hover on the a element within your .Y element, and use the + adjacent sibling combinator to select the element next to it:
.Y a:hover + span + span {
color: #ccc;
display: block;
}
As you can see, I haven't had to use the .A-element or .B-element classes at all as this will apply to both your .A-element and .B-element elements.
Simplified Code Snippet
.Y a:hover + span {
background: tomato;
color: #fff;
padding: 0 20px;
}
<div class="X">
<span class="Y">
<a href="XYZ">
<span class="A">Hover here</span>
</a>
<span class="A-element">A</span>
</span>
<span class="Y">
<a href="XYZ">
<span class="B">Hover here</span>
</a>
<span class="B-element">B</span>
</span>
</div>
you can use hover on parent element. for example
.Y:hover .A-element {
color: #ccc;
display: block;
}
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;
}