使用 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 tagvar re_html = /<\s*p[^>]*>([^<]*)<\s*\/\s*p\s*>/g;// inner textvar 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到链接的绝对定位子级...听起来绝对定位使它们悬停在/阻止父级。