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');
}
);
Related
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
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!!!
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.
I have a 4x4 matrix of tiles. Each tile is basically a div. Now, I want to do the following:
When the mouse pointer is on a particular tile, I have to check perform a check on that tile(using position and stuff, which i have already done). If the tile meets the requirements, then it should have a hover effect.
Note: that the tiles keep changing positions, so at one moment the given tile must have the hover effect, but after rearrangement, it may not have it. And the rearrangement is not complete, ie i dont not reset the whole matrix. It involves only shifting a couple of tiles.
I need to implement this using css class and javascript(prototype, not jquery). I set a hover style for class hoverTile. I added a mouseover to each tile, such that whenever the user's mouse is over a tile, my function is called, which sets the class for the html div element using setAttribute.
Here is a summary:
Before:
<div> ... </div>
After:
<div class="hoverTile"> ... </div>
Style:
.hoverTile: hover{
text-color: red;
}
This does not seem to work, even though the class name appears when i inspect the html page. What is the mistake here?
Look at the demo I set up for you HERE
2 issues:
1) your seudo-selector (:hover) shouldn't have a space after the colon (:).
2) text-color should just be color
Micron and Igo probably answered your question although i'd like to add that you could achieve the same effect by adding
div:hover { color: red;
}
(you might not need the hoverTile class).
As for the border color
border-color:red; should work. [W3schools] So
.hoverTile { border: 5px solid #ff0000; } in your scheme.
Your CSS should be
.hoverTile:hover {
color: red;
}
not text-color (which is not a CSS property). Hope that fixes it.
EDIT: Also, if I understand correctly, you are adding hoverTile class on mouseover? In that case, you wouldn't need the :hover pseudo-class in your CSS at all. Make sure to remove the hoverTile class on mouseout though.
The menu should pop up when mouse hover. As for comments on this site.
Or the JavaScript equivalent:
<p>Hover me for more text...<span style="display:none" onmouseover="this.style.display='inline'" onmouseout="this.style.display='none'">see, I told you!</span></p>
A quick example would look something like this:
HTML
<p>Hover me for more text...<span>see, I told you!</span></p>
CSS
p span { display:none; }
p:hover span { display:inline; }
Demo: jsfiddle.net/fWK2e
Expand on that concept and you can hide an element until it's parent is hovered, revealing more content such as links or images, etc. Just know that the :hover pseudo-class doesn't work on older browsers so you'll have to resolve that with JS.