This question already has answers here:
How to keep :active css style after click a button
(3 answers)
Closed 3 years ago.
My application has several buttons (say b1,b2,b3) which I am using as navigation menu items (alternate to using <a>). I want to change the color of the button when it is clicked/selected. When a particular button is clicked (say b1), its color should change to say red and all b2,b3 should have color grey. When b2 is selected, it should be red and b1 should switch back to grey. Is there a way I can do so using css and pseudo elements (something similar to :hover)?
A good strategy is to have a class isClicked which have the styles of the clicked element, and toggle everytime the element is clicked,say:
I use jquery to show the logic behind it :D
$('div').click(function(){
$('div.isClicked').toggleClass('isClicked')
$(this).toggleClass('isClicked')
})
div {
width: 100px;
margin:10px auto;
cursor: pointer;
text-align:center;
background-color:grey;
}
div.isClicked {
background-color:red !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>A</div>
<div>B</div>
<div>C</div>
Related
This question already has an answer here:
Change Button Font Color on Hover With "Hover color" declared on each button tag not in CSS
(1 answer)
Closed 4 years ago.
I want to add color to the text. I have more texts. So I retrieve the text color from the server and added the text color to the corresponding text. I want to add the border for the text and need to assign corresponding text color for the border when hovering the text.
In style sheet, we can able to give hover like below:
.text: hover{
color:#FF0000;
}
But I have dynamic text color. I want to assign corresponding text color for the border for the corresponding text. In the style sheet, we cannot do.
Is there any way to add hover in style attribute in div?
You're giving the space before hover and after the colon(:), you have to write like this.
.text:hover {
color:#FF0000;
}
Hi you may achieve this using Jquery in my snippet I used common variable for color and utilised it please have a look.
Get hover event and add styles and remove styles dynamically
var color = "red";
$(".mycontent").hover(
function () {
$(this).css({
"color": color,
"border":" 1px solid "+color
})
},
function () {
$(this).css({
"color": "inherit",
"border":"inherit"
})
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mycontent"> inner content</div>
I hope this is helpful
div:hover .text:nth-child(odd) {
background: red;
}
div:hover .text:nth-child(even) {
background: blue;
}
This question already has answers here:
How to change the style of the title attribute inside an anchor tag?
(10 answers)
Closed 6 years ago.
I'm trying to change the pop-up of an element using CSS, yet it doesn't work.
name {
background-color: #00BBFF;
color: white;
}
<button title="name">Test</button>
Looks like you want to use the attribute selector https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
button[title="name"] {
background-color: #00BBFF;
color: white;
}
<button title="name">Test</button>
Unfortunately, the tooltip style cannot be changed in any browser.
I'd suggest you implementing your own with CSS (add a hidden span or some other element with the tooltip and show it on button:hover) or JS (nicer as you could set a delay before is shown).
This question already has answers here:
CSS3 transform on click using pure CSS
(8 answers)
Closed 9 years ago.
Is it possible to affect one element by another element? I want to move .box element when I click on the link a.link.
I tried this, But couldn't get it to work. What should I write at link:active?
<html>
<head>
<style>
.box
{
height:100px;
width:200px;
border:solid red 5px;
}
.link:hover
{
color:red;
}
.link:active
{
color:grey;
}
</style>
</head>
<body>
<a href="#" class=link >CLICK ME</a>
<div class=box></div>
</body>
</html>
It's possible using sibling/child selectors. The selector has to include the element you're taking action on.
When you click on .link, you want .box to move. They're next to each other, so you can use the adjacent sibling selector .link:active + .box.
You can use transitions to animate the movement.
see: http://jsfiddle.net/2P4aA/2/
This question already has answers here:
Is there any way to hover over one element and affect a different element? [duplicate]
(2 answers)
Closed 9 years ago.
im trying to write a code where you hover over a div and have a completely different div change its effect
heres my code
html
<div class="a">LOREM IPSUM</div>
<div class="boxhighlight"></div>
css
.a:hover, .boxhighlight
{
background-color:black;
}
what i want to happen is that when the user hovers over the word lorem ipsum, the div boxhighlight will change its background color
is there a way to do this?
thanks
Use like this
<div class="a">LOREM IPSUM</div>
<div class="boxhighlight" >asdf</div>
Your css
.a:hover ~ .boxhighlight {
background-color:black;
color: white;
}
See this for your Reference
See example in this Fiddle
Change the selector to this:
.a:hover + .boxhighlight {
background-color:black;
}
The selector changes the styles of the element that has class boxhighlight that next to .a when hovered.
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 7 years ago.
I'm making a gallery where when you hover over the main image, the thumbnails should become transparent. I would like to achieve this with pure CSS, but I'm not sure if that's possible.
CSS:
/* should affect thumbs but not main */
/* obviously this code wouldn't work */
#main:hover, #thumbs {
opacity: .5;
}
HTML:
<div id="main">
Hover over me to change #thumbs
</div>
<div id="thumbs">
I change when you hover over #main
</div>
Is this possible using pure CSS?
Sure, just use the adjacent sibling selector:
#div1:hover + #div2 {
...
}
An example here: http://jsfiddle.net/6BfR6/94/
Only children of a selector can be affected. Otherwise, you'll need to use javascript.
For instance:
div:hover #childDiv {
background: green;
}
#div1:hover + #div2 {
...
}
it works fine in IE 7, 8, 9 and 10. No need to any JS or onovermouse and NOT ONLY children of a selector can be affected.
Try the example Link of "Nightfirecat".
even if it is, it will not work in IE :)
i would suggest using onmouseover event
however it is nice question and I am curious if someone has solution of doing it cross-browser via css
I think you're going to need some javascript for that.
No. You would have to use Javascript.