Div悬停指针

Question

我有div2(height 20px vertical align centre)里面div1(100px)和div2有锚标记。

悬停的div1我正在显示手形指针，但也想在点击任何地方点击div1区域时，它应该导航到锚点标记网址。更多的细节

.test:hover { 
 
    cursor: pointer; 
 
    cursor: hand; 
 
}

<div class="test" style="height:100px"> 
 
    <div style=" position: relative; top: 50%; transform: translateY(-50%);"> 
 
    <a href="google.com" ; target="_blank" title="This link opens in a new window" style="color:#2e3940;text-decoration: initial;">Pawan Kotak</a> 
 
    </div> 
 
</div>

Answer 1

尝试用以下方式

$(div1).on("click",function(){ 
    window.location = $(this).find("a").attr("href"); 
}); 

这仅仅是一个出路。

Answer 2

假设你的DIV ID的是div1和div2这里是一个解决方案，请参考图片。

$('#div1').on('click',function(){ 
    $(this).find('a').trigger('click'); 
}); 

该脚本将附加click事件的div1和当过用户点击这个div它找到a标签与它$(this).find('a')，并触发对锚标记click事件。

Answer 3

如果外“DIV”的行为应该像一个锚，只是重新排序的元素是这样的：

<a href="myAnchor.tld"> 
    <div id="div1"> 
    <div id="div2"></div> 
    </div> 
</a> 

您不必更动jQuery的，如果您的标记可以简单地结构化的方式它真的有用。

Answer 4

你也可以增加你的锚标记（有几种方法/办法）

.test { 
 
    background-color: red; 
 
} 
 
.test a { 
 
    cursor: hand; 
 
    background-color: blue; 
 
    display: block; 
 
    line-height: 100px; 
 
}

<div class="test" style="height:100px"> 
 
    <div style=" position: relative; top: 50%; transform: translateY(-50%);"> 
 
    <a href="google.com" ; target="_blank" title="This link opens in a new window" style="color:#2e3940;text-decoration: initial;">Pawan Kotak</a> 
 
    </div> 
 
</div>