Div悬停指针

Question

我在div2(height 20px vertical align centre)内有div1(100px)，div2有锚标记。

在div1悬停时，我正在显示手形指针，但也希望点击div1区域中的任何位置，它应导航到锚标记网址。请参阅图片了解更多详情

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果外部＆＃39; div＆＃39;应该像锚一样，只需重新排序这样的元素：

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

如果您的标记可以按其实际工作的方式进行结构化，那么您不必使用jQuery。

Answer 2

假设您的div id为div1，div2这是一个解决方案。

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

该脚本会将click事件附加到div1，当用户点击此div时，会在其中找到a标记$(this).find('a')并触发点击事件在那个锚标签上。

Answer 3

尝试以下方式

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

这只是一个出路。

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>