使用 js 添加 html 后标签链接不起作用

Question

伙计们。

我需要一些帮助

我希望在单击标签中的所有范围时重定向页面，但是如果单击 p 标签不起作用

首先我上传我的代码

html

  <div id="news" class="news">

     <a href="{{ post.address }}" onmouseover="newsMouseOver(this);" onmouseout="newsMouseOut(this);">

        <p class="news-title">{{ post.limit_title }}</p>

        <p class="news-date">{{ post.created_at|date:"Y.m.d" }}</p>

     </a>

  </div>

CSS

.news {

  width: 501px;

  height: 50px;

  border-radius: 5px;

  background-color: #ffffff;

  margin-top: 9px;

  font-size: 13px;

  color: #666666;

  position: static;

}

.news a {

  border-radius: 5px;

  color: #666666;

  display: flex;

  height: 50px;

  align-items: center;

  position: relative;

}

.news a p {

  font-size: 13px;

  font-family: "Noto";

  color: #666666;

  margin-left: 20px;

}

.news a:hover p {

  font-family: "Noto-Medium";

  color: #333333;

  position: static;

}

.news a:hover {

  border: 1px solid #24b97e;

}

.news a .news-date {

  position: absolute;

  top: 18px;

  right: 15px;

  color: #bbbbbb;

}

.news a:hover .news-date {

  padding: 0;

  color: #999999;

  position: absolute;

  right: 10%;

  text-align: end;

}

.news a span {

  background-color: #24b97e;

  color: white;

  position: absolute;

  width: 8%;

  top: 0;

  right: 0;

  height: 100%;

  display: flex;

  vertical-align: middle;

  justify-content: center;

  align-items: center;

}

js

// all find p tag

var re_html = /<\s*p[^>]*>([^<]*)<\s*\/\s*p\s*>/g;

// inner text

var re = /<\s*p[^>]*>([^<]*)<\s*\/\s*p\s*>/;

function newsMouseOver(self) {

  let origianl_html= self.innerHTML;

  let innerTextList = origianl_html.match(re_html);

  let innerText1 = re.exec(innerTextList[0]);

  let innerText2 = re.exec(innerTextList[1]);

  self.innerHTML = "<p class='news-title'>" + innerText1[1] + "</p>\

    <p class='news-date'>" + innerText2[1] + "</p>\

    <span><i class='fas fa-angle-right'></i></span>"

}

这是我的代码

当鼠标悬停在标签上时，更改 html 代码并设置样式

并且，当鼠标悬停到标签时返回代码和样式

最后，删除 js 时链接正常工作

但我需要js代码我该怎么办..

Answer 1

尝试添加pointer-events: none到链接的绝对定位子级...听起来绝对定位使它们悬停在/阻止父级。