a tag link is not working after add html with js

Question

guys.

i need some help

i want redirect page when click in all of range in a tag but, if click p tag is not working

first i upload my code

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

function newsMouseOut(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>"
}

this is my code

when mouseover to a tag, change html code and set style

and, return code and style when mouseout to a tag

finally, link working when remove js

but i need js code how can i do..

score 0 · Accepted Answer · answered Dec 23 '20 at 14:45

0

Try adding pointer-events: none to the absolutely positoned children of the links... it sounds like the absolute positioning is making them hover over/block the parent.

answered Dec 23 '20 at 14:45

Marin Carroll

61
5

Or possibly z-index: -1 could work as well: https://stackoverflow.com/questions/16773989/when-div-with-absolute-position-is-added-cannot-click-on-links – Marin Carroll Dec 23 '20 at 14:45

a tag link is not working after add html with js

1 Answers1