如何在悬停时删除类的类答案

【问题标题】：How do I removeClass of a class whilst hovering如何在悬停时删除类的类
【发布时间】：2017-05-15 01:51:18
【问题描述】：

当我将鼠标悬停在不同的类时，我只是想删除一个类（以隐藏它）。我不太确定哪里出错了，我认为有一个简单的解决方法。

        <div class="description">
            <h2>Writer - London</h2>
            <p>Helene is a French born, London raised writer exploring topics ranging from <mark class="red">art</mark>, <mark class="blue">history</mark>, <mark class="green">feminism</mark> and <mark class="purple">social issues</mark>.</p>
            <p>Her website is currently being <u>updated</u>. Please click on the links to the left to be directed to her work.</p>
        </div>`

       <ul class="projectList">
        <li class="projectImage1"><a class="btn" href="kwao.html">Philomena 
         Kwao<span><img src="helene images/philomena.jpg" alt=""height="580" 
         width="370" /></span></a>
         </li>`

我希望当我将鼠标悬停在具有“绿色”类的“女权主义”一词上时执行此操作。

$('mark.green').hover(
function() {
$this.removeClass('.projectImage1')
});`

update 澄清一下，我的意图是在另一个类悬停时完全隐藏该类。在 css 中，这将是 - 不显示。

【问题讨论】：

您正在寻找$(this).removeClass()，尽管$(this) 将引用<mark> 元素。我认为您正在尝试从 <li> 元素中删除该类，这将是 $('li.projectImage1').removeClass('.projectImage1')。
我在问这个问题之前试过这个，不幸的是没用
当您将鼠标悬停在mark.green 上时，您希望将.projectImage 类从li.projectImage1 中删除？
只有当我将鼠标悬停在“mark.green”上时，我才试图从“
”中删除该类

【解决方案1】：

$('mark.green').hover(function() {
    $('. projectList > li').removeClass('.projectImage1')
});`

【讨论】：

我想你的意思是...('.projectList > li').removeClass('projectImage1')?
是的，我不小心添加了一个点来删除类
还有. projectList中的空格

【解决方案2】：

假设您希望它在悬停时切换类，请根据初始类为元素创建一个变量，以便您可以在有或没有类的情况下引用它，然后切换变量的类。

var $projectImage = $('li.projectImage1');
$("mark.green").hover(function() {
  $projectImage.removeClass("projectImage1");
},function() {
  $projectImage.addClass("projectImage1");
});

.projectImage1 {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="description">
  <h2>Writer - London</h2>
  <p>Helene is a French born, London raised writer exploring topics ranging from <mark class="red">art</mark>, <mark class="blue">history</mark>, <mark class="green">feminism</mark> and <mark class="purple">social issues</mark>.</p>
  <p>Her website is currently being <u>updated</u>. Please click on the links to the left to be directed to her work.</p>
</div>

<ul class="projectList">
  <li class="projectImage1"><a class="btn" href="kwao.html">Philomena 
         Kwao<span><img src="helene images/philomena.jpg" alt=""height="580" 
         width="370" /></span></a>
  </li>
</ul>

【讨论】：

【解决方案3】：

您可以像这样使用 toggleClass() 函数。

$('mark.green').hover(function() {
    $('.projectList > li').toggleClass('toggle-className')
});

.toggle-className{
  background:#000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="description">
            <h2>Writer - London</h2>
            <p>Helene is a French born, London raised writer exploring topics ranging from <mark class="red">art</mark>, <mark class="blue">history</mark>, <mark class="green">feminism</mark> and <mark class="purple">social issues</mark>.</p>
            <p>Her website is currently being <u>updated</u>. Please click on the links to the left to be directed to her work.</p>
        </div>`

       <ul class="projectList">
        <li class="projectImage1 toggle-className"><a class="btn" href="kwao.html">Philomena 
         Kwao<span><img src="helene images/philomena.jpg" alt=""height="580" 
         width="370" /></span></a>
         </li>`

【讨论】：