entire clickable <div> with nested divs

Question

What I'm trying to do is to change the background color on the whole "row" div on mouse over and open the href link clicking on any part of the div. I have tried all the solutions I found on SO (both with jquery and pure css) but I can't get it working

Here is my code:

HTML

    <div id="row">
        <div class="document-date"><?php the_time('d-m-Y') ?></div>
        <div class="document-category"><img src="/images/icon.png" /></div>
        <div class="document-title"><a href="myurl..." target="_blank">My link</a>
        <p>some description</p>
   </div>

And the CSS

#row {

    position: relative;
    width: 700px;
    padding: 5px 0 5px 10px;
    display: block;
    float: left;
}

#row:hover {

    background: #fbf5d8;
}


.document-date{

    float: left;
    color: #1b6392;
    font-size: 12px;
    margin-right: 10px;
    line-height: 35px;

}

.document-category{

    float: left;
    margin-right: 10px;
    line-height: 35px;

}

.document-title {

    width: 350px;
    float: left;
    color: #020100;
    font-size: 12px;
    font-weight: normal;
    margin-top: 1px;
    text-decoration: none;

}

.document-title a{

    width: 350px;
    float: left;
    color: #020100;
    font-size: 14px;
    font-weight: bold;
    margin-top: 1px;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;

}

.document-title a:hover{

    color: #fff;

}

Any suggestion?

Answer 1

Assuming when you say li, you mean div#row

CSS:

#row:hover {
  cursor: pointer
}

JavaScript (using jQuery):

$('#row').click(function() {
  // do something
  // example:
  $(this).find('a:first').click();
});

Answer 2

   <div id="row" onclick="alert(1)">
        <div class="document-date" >12-08-2014</div>
        <div class="document-category" ><img src="/images/icon.png" /></div>
        <div class="document-title" ><a href="myurl..." target="_blank" >My link</a><br/><p>some description</p>
   </div>​

This would do the trick. Or if you want the divs separately

<div id="row">
        <div class="document-date"  onclick="alert(1)">12-08-2014</div>
        <div class="document-category" onclick="alert(1)" ><img src="/images/icon.png" /></div>
        <div class="document-title"  onclick="alert(1)"><a href="myurl..." target="_blank" >My link</a><br/><p>some description</p>
   </div>​