Question

我有一个带有 <h5>Header</h5> 标记的标题，我想在将其悬停时将其更改为 <i class="material-icons>flash_on</i> 并在悬停时将其更改回

这是我的html代码；

<nav class="nav-extended themed white">
    <div class="nav-wrapper">
        <!-- I WANT TO CHANGE THIS ON HOVER ==> --> <h5 id="charger">Şarj Aletleri</h5>
        <!-- TO THIS ==> <i class="material-icons">flash_on</i> -->
    </div>
    <div class="divider"></div>
    <div class="nav-content">
        <ul class="tabs themed">
           <li class="tab"><a class="active" href="#allchargers">tümü</a></li>
           <li class="tab"><a href="#syroxchargers">syrox</a></li>
           <li class="tab"><a href="#cepiumchargers">cepium</a></li>
           <li class="tab"><a href="#ttecchargers">ttec</a></li>
        </ul>
    </div>
</nav>

Answer 1

你不需要 JavaScript，你可以添加简单的 CSS 来改变元素的显示，例如

.nav-wrapper .material-icons {
  display: none;
}
.nav-wrapper:hover #charger {
  display: none;
}
.nav-wrapper:hover .material-icons {
  display: block;
}

<nav class="nav-extended themed white">
<div class="nav-wrapper">
    <h5 id="charger">Şarj Aletleri</h5>
    <i class="material-icons">flash_on</i>
</div>
<div class="divider"></div>
<div class="nav-content">
    <ul class="tabs themed">
       <li class="tab"><a class="active" href="#allchargers">tümü</a></li>
       <li class="tab"><a href="#syroxchargers">syrox</a></li>
       <li class="tab"><a href="#cepiumchargers">cepium</a></li>
       <li class="tab"><a href="#ttecchargers">ttec</a></li>
    </ul>
</div>

或者如果您需要更改 HTML 内容，那么您可以像这样使用 jQuery 进行更改：

$(function(){
  $('.nav-wrapper').mouseenter(function(){
    $(this).html('<i class="material-icons">flash_on</i>');
  });
  $('.nav-wrapper').mouseleave(function(){
    $(this).html('<h5 id="charger">Şarj Aletleri</h5>');
  });
});

.nav-wrapper h5,i {
  display: inline-block;
  margin: 0;
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav-extended themed white">
<div class="nav-wrapper">
    <h5 id="charger">Şarj Aletleri</h5>
</div>
<div class="divider"></div>
<div class="nav-content">
    <ul class="tabs themed">
       <li class="tab"><a class="active" href="#allchargers">tümü</a></li>
       <li class="tab"><a href="#syroxchargers">syrox</a></li>
       <li class="tab"><a href="#cepiumchargers">cepium</a></li>
       <li class="tab"><a href="#ttecchargers">ttec</a></li>
    </ul>
</div>

如何使用 JQuery 将 HTML 标签更改为另一个标签？

1 个答案: