How to give a div a hover and active state on click - javascript

i've got a div which is black, when I hover over it, it turns green. when clicked, I want it to stay green also.
normale state: black
hover state: green
active state: green
and when its active (green), I want to hover over it which makes the div black again.
i can't seem to get this active state work and in reverse.
thanks in advance!
Here is my fiddle: Link

You can do it without jQuery in pure CSS. Give your DIV a tabIndex so it can receive focus:
<div id="profile" tabindex="0"></div>
And add :focus class selection:
#profile:hover, #profile:focus{
background: green;
}
Demo: http://jsfiddle.net/AfR49/10/
This way the color "stick" after the click. (If I understood your requirement correctly). If you click elsewhere - color returns to the original

Simply add styling for the :hover state on the .active class (note that I'm using tomato instead of black as that's the colour you've used in your demo):
#profile.active:hover {
background: tomato;
}
JSFiddle.
I'm not sure what you're wanting to achieve here though:
$('#profile').removeClass('active');
$(this).addClass('active');
If you're wanting the element to toggle on and off of .active with each click, you can simply:
$(this).toggleClass('active');

Create a class .active containing the styling you want and add it to the div with jQuery.
The you can easily style your div in the two states.
.normal {background-color:black}
.normal:hover {background-color: green}
.active {background-color: green}
.active:hover {background-color: black}

Lets say you have the following div
<div id="divSample"></div>
Then, you will need the following CSS:
#divSample {
background-color:Black;
height:300px;
width:500px;
}
#divSample:hover {
background-color:Green;
}
#divSample:active {
background-color:Green;
}
You can see this here: http://jsfiddle.net/h4aVW/
Hope this helps!!!

Related

jquery ui accordion on hover text color

I'm trying to get the color of the accordion to change on hover only when the the section being hovered over is collapsed.
The closest I've gotten is this, which changes the text color ONLY when I hover over the text but not over the rest of the accordion element and it also changes the color when the section is active.
CSS:
.ui-accordion a:hover{
color:blue
}
HTML:
<div id="accordion">
<h5>
Section 1
</h5>
<h5>
Section 2
</h5>
</div>
Just guessing from what I read are you trying to only have the color change to blue when it is not the open element?
Fiddle: http://jsfiddle.net/AtheistP3ace/7jf7cngd/
I used h3 in the example in the fiddle here which I took from jquery's site. Are you using a? jQuery adds .ui-state-active to the active one automatically so I took advantage of that.
.ui-accordion h3:not(.ui-state-active):hover{
color:blue
}
Updated fiddle using the HTML you added: http://jsfiddle.net/AtheistP3ace/7jf7cngd/1/
.ui-accordion h5:not(.ui-state-active) a:hover{
color:blue
}
Updated to include hovering over entire header: http://jsfiddle.net/AtheistP3ace/7jf7cngd/23/
.ui-accordion h5:not(.ui-state-active):hover a {
color: blue
}
You will have to apply hover to .ui-accordion-header and not for .ui-accordion a for jQuery UI Accordion. Do it as below
.ui-accordion-header:hover {
color: blue;
}

When you hover over one div, chage the style of multiple other divs

Good Afternoon,
I need a little help if possible...
As the title explains, when you hover over a div, i want multiple other divs styles to be changed (different colours at the min). i have currently tried using just pure CSS but finding it quite a struggle. My JSFiddle
As you can see on my JSFiddle, when you hover over the 'red' box, the boxes at either side changes colour to yellow, if you hover over the 'Green' box, it changes colour to yellow, however, if you over over the 'pink' box it changes colour to cyan but also the far left box changes to yellow, which i dont want to happen.
Could anybody help out? I dont mind if i have to use JQuery/Javascript thats not an issue, i just attempted using CSS as i have no knowledge of JQuery/Javascript.
Thank you and i hope it makes sense what i am trying to achieve.
CSS
img{width:100%;}
#container{width:100%; float:left;}
.maintest{width:20%; height:150px; background:red; float:left;}
.maintest:hover{background:#f2f2f2;}
.maintest2{width:20%; height:150px; background:green; float:left;}
.maintest2:hover{background:magenta;}
.maintest3{width:20%; height:150px; background:pink; float:left;}
.maintest3:hover{background:cyan;}
#container:hover .maintest2{background:yellow; border-right:solid 1px black;}
.maintest:hover ~ .maintest3{background:yellow}
HTML
<div id="container">
<a href="#" class="maintest2">
</a>
<a class="maintest" href="#"></a>
</div>
This rule #container:hover .maintest2 {} is causing the behavior you don't want. But this is also giving you the desired behavior of having the "when I hover over red, it changes the other 2 boxes to yellow.
Like the commenters said, this doesn't look possible without using JS.
Quick jquery to do it:
$(".maintest2, .maintest3").hover(function(){
$(this).addClass("yellow-background");
}, function(){
$(this).removeClass("yellow-background");
});
$(".maintest").hover(function(){
$(".maintest2, .maintest3").addClass("yellow-background");
}, function(){
$(".maintest2, .maintest3").removeClass("yellow-background");
});
Documentation on hover event: https://api.jquery.com/hover/
Since you don't mind using jQuery, I will give you a jQuery answer,
$('.box').each(function() {
//this will iterate through each div with class=box
$(this).hover(function() {
//on mouse in
$(this).attr('data-active-box', 'true');
},
function() {
//on mouse out
$(this).attr('data-active-box', 'false');
});
});
.box {
width: 100px;
height: 100px;
display: inline-block;
}
.box[data-active-box='true'] {
background-color: green;
}
.box[data-active-box='false'] {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='box box1' data-active-box='false'></div>
<div class='box box2' data-active-box='false'></div>
<div class='box box3' data-active-box='false'></div>
The js will toggle the data attribute on mouse-in/out. The css will style the div based on the attribute. There's a million ways to do this!

jQuery addClass on click to specific element

I am trying to animate a menu item.
On move over it expands left, and on mouse out it contracts back.
This works fine.
I am also trying to add a class on click to give the button a specific color but it doesn't seem to work.
Here is a fiddle http://jsfiddle.net/g3ra912j/
css:
#menu1 .active {
background-color: #00f;
}
script:
$("#menu1").click(function () {
$(this).toggleClass("active")
})
onclick it supposed to turn blue, but it doesn't.
What am I doing wrong?
Thanks
You have an extra space in your CSS. Should be
#menu1.active {
background-color: #00f;
}
since you are adding the class .active to the same element as has the id menu1. The original CSS would target an element with class .active inside #menu1.
i had to deal with the same problem. use addClass('active') instead toggleClass. just have an if condition to check if the element already has active class before adding active class
let me know if it works.
and about the css bobdye was right

How to make one element get hovered when hover on other element

I need such a scenario at where if anyone hover on a div, another div will be hovered. Just like:
HTML
<div class="box"></div>
<div class="link-box">
Touch the Grey Box and I get hovered!
</div>
CSS:
.link-box a:hover {
color: red;
}
Foddle Work
If anyone hover on the div.box, div.link-box will get hovered I mean get the red color. Is it possible? Please, don't tell it like this CSS way:
.box:hover .link-box a {
color: red;
}
My scenario is not like this. I've more complex scenario. So, it's only possible with jQuery. As I ain't good at jQuery, I can't write the script. That's why I need your help. What's the jQuery for it? May be, something like this?
$('.box').hover(function(){
$('.link-box').hover();
});
..............................................Update..................................
All the answer is related with CSS. Basically, div.link-box is such a complex div at my webpage that if anyone hover on the div.link-box many action happened, like pop-up box coming, multiple child elements of div.link-boxwill change. All happened with jQuery + CSS. And I need all the hover action of div.link-box when anyone hover on div.box. I just make here div.link-box as a link to make you understand my problem. But, basically it's not just css change. So, is it possible to bring all div.link-box hover action by hover on another div/button/link just like div.box by jQuery ?
As long as they stay in the same layout you can use the adjacent selector (+) in css.
Updated Fiddle
.link-box a:hover, .box:hover + .link-box a{
color: red;
}
The important thing to remember about the adject selector is that the two divs have to have the same parent, and the box has to immediately precede the second div.
More information on the adjacent selector
Edit:
Another option would be to wrap both divs in another div, and use the hover of the wrapper div.
This second option doesn't have the drawbacks of using the adjacent selector. As long as the anchor is anywhere inside of the wrapper, it will be styled when any part of the wrapper is hovered.
FIDDLE
Like so:
<div class='box-wrapper'>
<div class="box"></div>
<div class="link-box"> Touch the Grey Box and I get hovered!
</div>
</div>
with the following style:
.box-wrapper:hover a {
color: red;
}
Create a CSS class called "hover" (to affect you a make it .hover a)
.hover a
{
color: red;
}
Then your JQuery would read:
$('.box').hover(function(){
$(".link-box").toggleClass("hover");
});
Instead of the :hover css selector, I would use classes.
CSS:
.hover{
color:red;
}
JS:
$('.box').hover(
function(){
$('.link-box').addClass('.hover');
},
function(){
$('.link-box').removeClass('hover');
}
);

How to keep the background color persistent in css active?

I have a image, when user clicks on it I am changing the background color of it. for ex:
HTML:
<img src="images/image1.png" />
CSS:
img:active{
background-color:red;
}
But the red color is not persistent. and the red color is replaced with the old color. How can I make it persistent ?
OnClick functionality isn't achievable solely through CSS. You will need to use javascript to achieve this.
Just use jQuery:
$('img').click(function(){
$(this).addClass('red');
});
then in css make sure you have something like this:
img.red {
background-color:red;
}
As others pointed out, you should use javascript with onclick event handler, save the clicked element's state and toggle at right time... However I would like to introduce this work-around without using any script, it uses some focusable wrapper (like a button) to mimic other unfocusable element (like the image) and use the :focus pseudo-class to style the active element (as you understand, it can be in such a state by clicking or tabbing):
HTML:
<button class="wrapper">
<img/>
</button>
CSS:
.wrapper > img {
background-color:inherit;
width:200px;
height:200px;
}
.wrapper {
border:none;
padding:0;
cursor:default;
}
.wrapper:focus {
background-color:red;
outline:none;
}
Here is the working fiddle, try clicking the image and then clicking on some point outside to see it in action.

Categories