I have a line of text (a link) within a div. I'd like the div color to change on mouse over the link. I tried various things without success. You can see my current code here: / Note that I'm not necessarily looking for a jquery solution. Tks for your help

CSS

.source-title-box a{
    color:#467FD9;
    display:inline-block;   
}
.source-title-box a:hover{
    color:#666666;
}
.source-title-box hover{background:#cb2326;}

JS:

$('a').hover(function(){
    $(this).parent().toggleClass('hover');
});​

I have a line of text (a link) within a div. I'd like the div color to change on mouse over the link. I tried various things without success. You can see my current code here: http://jsfiddle/Grek/D3TzM/ Note that I'm not necessarily looking for a jquery solution. Tks for your help

CSS

.source-title-box a{
    color:#467FD9;
    display:inline-block;   
}
.source-title-box a:hover{
    color:#666666;
}
.source-title-box hover{background:#cb2326;}

JS:

$('a').hover(function(){
    $(this).parent().toggleClass('hover');
});​

• javascript
• jquery
• css

5 Answers 5

you can select below a pseudo class like :hover. No need for javascript at all for this.

http://jsfiddle/7bFKq/

.source-title-box:hover{
    background-color:#467FD9;

}

.source-title-box:hover a{
    color:#FFFFFF;
}

​

If you must do it with a hover on a, you will need javascript.

http://jsfiddle/7wwdb/

$('a').hover(function(){
    // .closest will get you to the div regardless of what might
    // be in between. With .parent you get to the absolute parent, which
    // in your case is a span
    $(this).closest('.source-title-box').toggleClass('hover');
});​

css is basically the same, just :hover to .hover

.source-title-box.hover{
    background-color:#467FD9;

}

.source-title-box.hover a{
    color:#FFFFFF;
}

jsFiddle DEMO

Just look for the closest div, the immidiate .parent() was a <span> tag (which aren't automatically block elements by nature, unless you make them that way).

$('.activity-title a').on('mouseover', function () {
    $(this).closest('div').toggleClass('hover');
});

$('.activity-title a').on('mouseout', function () {
    $(this).closest('div').toggleClass('hover');
});

Changes this:

.source-title-box a
{
    color:#467FD9;
    display:block;
    text-decoration:none;    
}

to:

.source-title-box a
{
    color:#467FD9;
    display:block;
    text-decoration:none;  
    padding:15px;
}

And this:

.source-title-box
{
    color: #000;
    background: #fff;
    padding: 15px;
    width: 200px;
    position: relative;
    margin-top:10px;
    border: 1px dotted #666;
}

to:

.source-title-box
{
    color:#000;
    background:#fff;
    width:230px;
    position:relative;
    margin-top:10px;
    border:1px dotted #666;
}

DEMO

No JS required.

Keep the JavaScript you have, and add this CSS class:

.hover {
    background-color: #f00;
}

http://jsfiddle/RLjvB/

Greg, There are 2 points:

1) The jquery .hover() function expects two handlers as argument. One for handlerin (mouse over) and one for handlerout (on mouse out). Giving only one argument uses the argument as an In-Out handler, i.e the same handler for both mouse events.

2) Make sure that the script that you have written (js) is included at the bottom of the page. ie, just before closing the "body" tag.
This is because : the html element may not be loading when the script executes.

...Your HTML Code...
<script>
    $('a').hover(function(){
    $(this).parent().toggleClass('hover');
    });​
</script>
</body>

Hope this helps.