Question

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.net/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');
});​

Answer 1

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.