点击div上的任意位置，而不是直接点击链接 [英] Click anywhere on div instead of directly on Link

问题描述

在下面的代码所示的场景中，我如何允许用户点击 div.post 上的任意位置，而不是

In the scenario shown in the code below, how can I allow the user to click anywhere on div.post, instead of precisely on one of the the actual a elements?

<div class="post" style="padding: 20px; background-color: transparent;">

    <div class="thumbnail" style="float: left; background-color: #ccc;">    
        <a href="http://...">
            <img src="http://...">
        </a>
    </div>

    <div class="title" style="float: right;">
        <a href="http://...">title</a>
    </div>

</div>

---

我还需要突出显示完整的 div.post 鼠标悬停，我目前使用：

---

I also need to highlight the complete div.post on mouseover, which I currently do using:

$("div.post").hover(

    function() {
        $(this).css("background-color", "#333");
        $(this).find("div.thumbnail").css("background-color", "#333");
    },

    function() {
        $(this).css("background-color", "transparent");
        $(this).find("div.thumbnail").css("background-color", "#ccc");      
    }
);

---

EDIT 将优先：

• 使用CSS而不是jQuery


• 验证为XHTML 1.0 Strict
• 
  
• 不要在 div c>
上包装 a b
• 不涉及空的 a

• use CSS instead of jQuery
• validate as XHTML 1.0 Strict
• do not wrap an a around a div
• do not involve an empty a

考虑ArVan的解决方案是最好的（见我的评论）。

So far, I consider ArVan's solution to be the best (see my comment there).

推荐答案

尝试在div上添加onclick监听器。你可以这样在html像这样< div class =poststyle =padding：20px; background-color：transparent; onclick =location.href ='http：// ...'> 。

Try adding an onclick listener on the div. You can do this in the html like this <div class="post" style="padding: 20px; background-color: transparent;" onclick="location.href='http://...'">.

这个：

$("div.post").click(function(){
   window.location.href = "http://...";
});

这篇关于点击div上的任意位置，而不是直接点击链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！