带有嵌套 div 的整个可点击 <div>答案

【问题标题】：entire clickable <div> with nested divs带有嵌套 div 的整个可点击 <div>
【发布时间】：2012-03-22 20:31:50
【问题描述】：

我要做的是在鼠标悬停时更改整个“行” 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;

}

有什么建议吗？

【问题讨论】：

我什至没有看到 li 元素 o.O
您的示例代码中没有li。
你的意思是<div id="row">？
我的错...对不起各位！我从另一个例子开始，它是一个 li，然后改为这个。修改了标题。

标签： css html-lists href clickable

【解决方案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>

【讨论】：

【解决方案2】：

假设你说li，你的意思是div#row

CSS：

#row:hover {
  cursor: pointer
}

JavaScript（使用 jQuery）：

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

【讨论】：

谢谢 Erick 我已经尝试过这个，但它不起作用。没有任何变化，可能我的 CSS 有一些混乱。我已经发布了。
解决了添加直播：$("#row").live("click", function() { window.location=$(this).find("a").attr("href"); return false; });
@Andycap 所以，您是从 JavaScript 注入 html 代码，或者您忘记在 jQuery 代码之前添加 $(document).ready。