Question

我要做的是在鼠标移开时更改整个“row”div上的背景颜色，然后单击div的任何部分打开href链接。我已经尝试了我在SO上找到的所有解决方案（包括jquery和纯css），但我无法使其正常工作

这是我的代码：

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>

和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;

}

有什么建议吗？

Answer 1

   <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>

这样就可以了。或者如果你想单独使用div

<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>

Answer 2

假设您说li，则表示div#row

CSS：

#row:hover {
  cursor: pointer
}

JavaScript（使用jQuery）：

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

整个可点击的<div>与嵌套的div </div>

2 个答案: