Question

当我悬停另一个班级时，我只是想删除一个班级（隐藏它）。我不太确定我哪里出错了，我认为有一个简单的解决办法。

        <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>`

当我将鼠标悬停在“女权主义”这个词上时，我希望能够采取这一行动。有班级＆＃34;绿色＆＃34;。

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

更新为了澄清，我的目的是在对方徘徊时完全隐藏课程。在css中，这将是 - 不显示。

Answer 1

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

Answer 2

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

＆＃13;

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

＆＃13;

.projectImage1 {
  border: 1px solid red;
}

＆＃13;

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

＆＃13;

Answer 3

你可以使用 toggleClass（）这样的功能。

＆＃13;

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

＆＃13;

.toggle-className{
  background:#000;
}

＆＃13;

<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>`

＆＃13;

如何在悬停时删除类的类

3 个答案: