Question

我只是想不通这一点。我有一个链接：

<a class="nav-link modalNavLinks"" href="#resA" id="resourceLinkA"><span>A</span></a>

我想在span标签之间插入HTML标题标签，如下所示：

<a class="nav-link modalNavLinks"" href="#resA" id="resourceLinkA"><span><h6>A</h6></span></a>

我希望链接悬停时会发生这种情况。我有此javascript代码，当链接悬停在上方时，该代码可用于添加和删除样式元素，但是我不知道如何插入和HTML标签元素。这是我的JavaScript代码：

 $(document).ready(function () {
    $("span").hover(function () {
        $(this).css("align-top", "text");
    }, function () {
        $(this).css("align-baseline", "text");
    });
});

Answer 1

不确定为什么要将跨度更改为h6。只需在链接的悬停上添加span的CSS。更改所需的任何属性，使其与h6的样式匹配。

a.nav-link:hover span {
  font-weight: bold;
  font-size: 2em;
}

<a class="nav-link" href="#resA" id="resourceLinkA"><span>A</span></a>

如果您确实想做自己想做的事情，则想使用.wrapInner()和.unwrap()，但这不是最佳做法。

编辑：

带有注释，听起来像是当您添加h6时，正在应用的其他CSS开始起作用。 h6和跨度的区别是块与内联。因此，听起来您需要在CSS中设置display: block。

a.nav-link:hover span {
  vertical-align: super
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">a<span>One</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">b<span>Two</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">c<span>Three</span></a>
  </li>
</ul>

Answer 2

这有效，但是方式很奇怪，现在我没有时间了。似乎当文本更改时，光标在外部并触发了另一个事件。

 $(document).ready(function () {
    $("span").hover(function () {
        
        let spanEl =document.querySelector('#resourceLinkA span')
        let text = spanEl.innerText;
        let newEl = document.createElement('h1');
        newEl.innerText = text;
        spanEl.innerText = '';
        spanEl.appendChild(newEl);
        
    }, function () {
        
        let spanEl =document.querySelector('#resourceLinkA span')
        spanEl.innerHTML = spanEl.querySelector('h1').innerText;
    });
});

.nav-link{
  border:1px solid green;
  display:block

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<a class="nav-link" href="#resA" id="resourceLinkA"><span>abc</span></a>

使用JavaScript在其他标签之间动态插入HTML标签

2 个答案: