Search code examples
csshtml-listshrefclickable

entire clickable <div> with nested divs

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?

Solution

  • 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();
});