2

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">
   <a href="#">Touch the Grey Box and I get hovered!</a>
</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 ?

user1896653
  • 3,247
  • 14
  • 49
  • 93
  • Possible duplicate of question: http://stackoverflow.com/questions/13325519/jquery-trigger-a-hover-event-from-another-element ? –  Jul 11 '14 at 16:20
  • You might be able to adapt http://stackoverflow.com/a/5199243/212869 to suit your needs. Just CSS and no jQuery. – NickSlash Jul 11 '14 at 16:27
  • Yes, it's one kind of duplicate question #anthonymasi. I haven't got my solution/can't understand that solution. That's why, I posted similar type of question with my problem – user1896653 Jul 11 '14 at 16:40

3 Answers3

3

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"> <a href="#">Touch the Grey Box and I get hovered!</a>
    </div>
</div>

with the following style:

.box-wrapper:hover a {
    color: red;
}
Smeegs
  • 9,151
  • 5
  • 42
  • 78
  • Upvote @smeegs, I am also curious about this problem. I tried the fiddle. Is there any way we can keep the activeness of hover to the box only. As I can check this gets activated even at the far corner of the page.?? Don't take it otherwise. – Khushal Dave Jul 11 '14 at 16:41
  • @KhushalDave, I assume you're talking about the second fiddle, I updated the link so that it's limited to the div http://jsfiddle.net/aHe7b/6/ – Smeegs Jul 11 '14 at 17:33
0

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");
});
Joey N
  • 328
  • 1
  • 2
  • 7
0

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');
    }
);
Anthony Veach
  • 320
  • 2
  • 10