I would like to display apple in green color (bg color) instead of mango in red colour (bg color) on click on the mango, I know it's possible with hover or using javascript. Is there any way to do it with css on mouse click?
#two
{
display:none;
}
#one
{
background-color :red;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="hov.css">
</head>
<body>
<div id="one">
<p>mango</p>
</div>
<div id="two">
<p>apple</p>
</div>
</body>
</html>
I think you can't do what you want with only CSS, but you can use the :active selector to change it while clicking on it.
See that: http://www.w3schools.com/cssref/sel_active.asp
It depends on what you mean by "click" and "display".
If you mean can you toggle the appearance of the "apple" div by just clicking the "mango" div, then NO...you need javascript.
However, if you just want to see the "mango" div while the mouse button is clicked and held down, then the pseudo-class :active is what you require...in conjuction with a suitable sibling selector.
#two {
display: none;
background: green;
}
#one {
background-color: red;
}
#one:active + #two {
display: block;
}
<div id="one">
<p>mango [click and hold]</p>
</div>
<div id="two">
<p>apple</p>
</div>
Note: This selector only works on siblings...it will not work on the p tag to affect the "apple" div.
which is best to use js for the click purpose.
CSS Only Solution
here is a simple hack to create the click functionality using css
for this purpose.here is a simple hack using checkbox and label.
label {
display: block;
background: red;
}
label:after{
content: "Mango";
}
#demo:checked + label {
background: Green;
color: white;
}
#demo:checked + label:after{
content: "Apple";
}
.hide{
display:none;
}
<input type="checkbox" id="demo" class="hide"/>
<label for="demo"></label>
Related
I work on a WordPress site for a friend and use the free Kadence Theme for that.
I want to display some text and when i hover over some of the words inside it, i want the whole background-colour of the site to change.
For that i identified an element to address with DevTools:
<div id="wrapper" class="site wp-site-blocks">
It works just fine, but ONLY if you hover fast enough from one span-element to another.
Try it out. First move your cursor slowly (no change of the background color). Then move the cursor quickly (background changes).
Why is that?
/* color change of text on hover */
h1>span:hover {
color: #dddddd;
}
/* color change of background on hover */
#wrapper:has(#rule1:hover) {
background: red;
}
#wrapper:has(#rule2:hover) {
background: blue;
}
#wrapper:has(#rule3:hover) {
background-color: green;
}
<div id="wrapper" class="site wp-site-blocks">
<section class="intro">
<h1>Rae magnim
<span id="rule1">volorrum</span>
<span id="rule2">recate</span>
<span id="rule3">parchil</span> ipsandiscias est labo.
</h1>
</section>
</div>
I also tried in vain to address the class instead like so:
.site:has(#rule1:hover) {
background: black;
}
Any ideas?
You can't change the background of the site when hovering an element using css only. Generally speaking a child cannot affect a parent in css, it's the other way around. It is only when using relative selectors that you can achieve it. Selectors such as: + and >.
With javascript that's a different story.
var list = document.querySelectorAll(".affects-wrapper");
var wrapper = document.querySelector("#wrapper");
list.forEach(function(item) {
item.addEventListener('mouseenter', function() {
wrapper.classList.add(item.id + "-class")
})
item.addEventListener('mouseleave', function() {
wrapper.classList.remove(item.id + "-class")
})
})
/* color change of text on hover */
h1>span:hover {
color: #dddddd;
}
/* color change of background on hover */
.rule1-class {
background: red;
}
.rule2-class {
background: blue;
}
.rule3-class {
background-color: green;
}
<div id="wrapper">
<section class="intro">
<h1>Rae magnim
<span id="rule1" class="affects-wrapper">volorrum</span>
<span id="rule2" class="affects-wrapper">recate</span>
<span id="rule3" class="affects-wrapper">parchil</span> ipsandiscias est labo.
</h1>
</section>
</div>
I've currently got a few buttons with the .continue class on a webpage, structured with the following code:
<div class="continue" data-section="1">
Continue
<i class="fas fa-arrow-right" id="continueArrow1"></i>
</div>
Each of the continue buttons have a different "data-section" values, and are also placed against different backgrounds on the webpage. I'm wondering if there is a way I am able to target one of these continue button divs that have a certain data-section value, and change the styling of those who match.
Something like:
.continue:data-section=1{
//css that styles button with data-section1
}
.continue:data-section=2{
//css that styles button with data-section2
}
Obviously I could always just give them different IDs, but that leads to a lot of code duplication for the JS and JQuery animations.
Use the attribute selector:
.continue[data-section="1"] {
...
}
Example:
div {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
margin: 5px;
}
.continue[data-section="2"] {
background: red;
}
/*We can combine this selector with other selectors as we normally would:*/
.continue[data-section="2"]:hover {
background: yellow;
}
<div class="continue" data-section="1"></div>
<div class="continue" data-section="2"></div>
<div class="continue" data-section="3"></div>
<div class="continue" data-section="4"></div>
<div class="continue" data-section="5"></div>
Read more on MDN
I can't figure out how to do this, and don't know if it's even possible:
<div class="container">
<div class="text"></div>
View more
<div>
How can I add a class to the div .text if I click on the link .view with only CSS?
I can't use javascript as I'm building a page with its css for AMP
If you can give a fragment to the anchor instead of 'javascript:;' then you can utilize the :target state of anchor.
#view-more {
display: none;
}
#view-more:target {
display: block;
}
<div class="container">
View more
<div class="text" id="view-more">text</div>
<div>
https://jsfiddle.net/karthick6891/g89fdagu/
But the best alternative is to use checkbox so you will have the :checked attribute, which is more robust
The only thing close to it I could think of would be to use the sibling styling
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
.text + a {
border: 2px solid #fc0;
}
So it is the next sibling item that is style and if you could order your structure as follows:
<div class="container">
View more
<div class="text">
</div>
Then maybe you could have
.text {
display: none;
}
a:active + text {
display: block;
}
You could then maybe use table row styling like the following to reorder them
setting the "a" as:
display: table-footer-group
setting the "text" as:
display: table-header-group
All without Javascript, but obviously the minute you haven't got the link active the text box disappears :-D
Soooooooooo you could have a checkbox instead..? when it is active the Adjacent sibling can be styled:
https://css-tricks.com/almanac/selectors/c/checked/
input[type=checkbox] + .text {
display: none;
}
input[type=checkbox]:checked + .text {
display: block;
}
Another possible solution
HTML
<div class="container">
<label for="textView">Button Style Me</label>
<input type="checkbox" name="textView" class="view">
<div class="text">Some Text</div>
</div>
STYLING
input[type=checkbox] + .text {
display: none;
}
input[type=checkbox]:checked + .text {
display: block;
}
CSS cannot do that, CSS is only styling. You can however do it with javascript.
<div class="container">
<div class="text"></div>
View more
<div>
<script>
function myFunction() {
var elements = document.getElementsByClassName("text");
for(var index = 0; index < elements.length; index++) {
var element = elements[index];
element.className += "otherclass";
}
}
</script>
I have a class named .color-blue with color:blue !important.
And I have a class inputContent with an input and a div, like this:
<div class="inputContent">
<input>
<div class="icon color-blue" style="color:red !important;">TEST</div>
</div>
and I want on input focused, .icon become the color of the class without put color:blue !important in inputContent or other.
I have tested
.inputContent input:focus ~ .icon {
color:inherit;
}
but nothing.
You can do it with jquery:
$("input").focus(function(){
$(".icon").attr("style", "color:blue");
});
try this one:
<style>
.icon{
color: red;}
input:focus + .icon{
color: blue;
}
</style>
<div class="inputContent">
<input>
<div class="icon">TEST</div>
</div>
I just want to "remove" or "cancel" the color of style="color:red !important;" and replace the color by the class color-blue without add lines like color:blue;
I use anchor as my site navigation.
<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>
The CSS
#nav {
margin-left: 50px;
margin-top: 50px;
text-transform: uppercase;
}
.navitem {
background: #333;
color: white;
width: 230px;
height: 50px;
font-size: 25px;
line-height: 50px;
padding-left: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 10px;
}
.about:hover {
background: #cc00ff;
}
.about:active {
background: #ff00ff;
color: #000;
width: 250px;
}
.works:hover {
background: #0066FF;
}
.works:active {
background: #0099cc;
color: #000;
width: 250px;
}
I'm wondering how to keep the div element style keep in the :active state once after the click until I hit another nav bar item, so how to do it?
Combine JS & CSS :
button{
/* 1st state */
}
button:hover{
/* hover state */
}
button:active{
/* click state */
}
button.active{
/* after click state */
}
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});
The :target-pseudo selector is made for these type of situations: http://reference.sitepoint.com/css/pseudoclass-target
It is supported by all modern browsers. To get some IE versions to understand it you can use something like Selectivizr
Here is a tab example with :target-pseudo selector.
I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
To make button change content:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
Hope it helps!!
You can use a little bit of Javascript to add and remove CSS classes of your navitems. For starters, create a CSS class that you're going to apply to the active element, name it ie: ".activeItem". Then, put a javascript function to each of your navigation buttons' onclick event which is going to add "activeItem" class to the one activated, and remove from the others...
It should look something like this: (untested!)
/*In your stylesheet*/
.activeItem{
background-color:#999; /*make some difference for the active item here */
}
/*In your javascript*/
var prevItem = null;
function activateItem(t){
if(prevItem != null){
prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
}
t.className += " activeItem";
prevItem = t;
}
<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>
If you want to keep your links to look like they are :active class, you should define :visited class same as :active so if you have a links in .example then you do something like this:
a.example:active, a.example:visited {
/* Put your active state style code here */ }
The Link visited Pseudo Class is used to select visited links as says the name.