Question

我希望我的i元素在悬停时丢失outline类，但由于某种原因，这不起作用。课程丢失并立即再次添加，没有褪色/延迟。如果我使用类background尝试这个完全相同的代码，那么它确实有效。我在这里看不到什么？

第二个问题是，当我尝试使用background类时，背景会在淡入淡出的持续时间内停留（在这种情况下为500毫秒），然后立即消失。这也应该是淡出，就像淡出一样。

谢谢！

$('nav a').hover(function(){
  if (!$(this).find("i").hasClass("home")){
    $(this).find('i').toggleClass('outline', 500);
    }
})

Answer 1

Time: Seconds elapsed [s] Torque [Nm] Speed [1/s] 0 20180307081032: 210025.02 5.25 0.00 1 20180307081033: 210025.98 17.50 3000.00 2 20180307081034: 210026.97 1688.75 3000.00可以作为参数传递2个函数。第一个是.hover()，第二个是.mouseover()

.mouseout()

<强>更新

你可以在没有Javascript的情况下添加fadein和fadeout效果，只能使用css：

$('nav a').hover(function() {
  $(this).find('.home').removeClass('outline');
}, function() {
  $('.home').addClass('outline');
})

<强> Demo here.

Answer 2

在[Radonirina Maminiaina]的帮助[1]的回答和我自己的一些代码修改后，我的工作完全符合预期。

Radonirina的想法是使用position: absolute;将第二个图标放在原始图标后面（参见上面的代码），然后我想出了将类"dark"添加到隐藏的图标在下面，只需选择它以使不透明度为0，悬停时为1，包括过渡效果。这使得CSS变得更加简单，而且效果很好。

再次感谢！

以下是最终结果的工作示例：

$('.menu-toggle').click(function() {
  $('nav').toggleClass('nav-open', 500);
  $(this).toggleClass('open');
})

@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
/* Navigation bar */

header {
  position: fixed;
  height: 50px;
  width: 100%;
  background: #666666;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a {
  color: #222;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1rem;
  font-family: Fjalla One;
}

.smallNav {
  position: absolute;
  top: 100%;
  right: 0;
  background: #CCCCCC;
  height: 0px;
  overflow: hidden;
}

.nav-open {
  height: auto;
}

.smallNav a {
  color: #444;
  display: block;
  padding: 1.5em 4em 1.5em 3em;
  border-bottom: 1px solid #BCBCBC;
}

.smallNav a:last-child {
  border-bottom: none;
}

.smallNav a:hover,
.smallNav a:focus {
  color: #222;
  background: #BABABA;
}

/* Menu toggle */

.menu-toggle {
  padding: 1em;
  position: absolute;
  right: 1em;
  top: 0.75em;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background: white;
  height: 3px;
  width: 1.5em;
  border-radius: 3px;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger {
  transform: rotate(45deg);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  transform: translateY(-3px) rotate(-90deg);
}

.menu-toggle:hover {
  transform: scale(1.1);
}

i.icon {
  margin-right: 0.5em !important;
  font-size: 1.2em !important;
}

/* Change icons on hover */
nav a i.dark {
    position: absolute;
    left: 42px;
}
nav a i.dark {
    opacity: 0;
    transition: opacity .25s ease;
}
nav a:hover i.dark {
    opacity: 1;
    transition: opacity .25s ease;
}
nav a:hover i.outline {
	opacity: 0;
	transition: opacity .25s ease;
}

<!DOCTYPE html>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<header>
  <div class="header-container">

    <nav class="smallNav">
      <ul>
        <a href="#"><li><i class="icon home"></i>Home</li></a>
				<a href="#"><li><i class="icon star outline"></i><i class="icon star dark"></i>Featured</li></a>
				<a href="#"><li><i class="icon newspaper outline"></i><i class="icon newspaper dark"></i>News</li></a>
				<a href="#"><li><i class="icon user outline"></i><i class="icon user dark"></i>Career</li></a>
				<a href="#"><li><i class="icon envelope outline"></i><i class="icon envelope dark"></i>Contact</li></a>
      </ul>
    </nav>

    <div class="menu-toggle">
      <div class="hamburger">
      </div>
    </div>

  </div>
</header>

jQuery toggleClass淡入淡出适用于一个类而不是另一个类？

2 个答案: