Question

我在向图像类添加类时遇到问题。我要添加的课程会让图片在悬停时连续旋转，知道我可能做错了什么？

我的代码如下

HTML

<header>
   <nav>
     <img class="logo" src="images/circularLogo.png" alt="logo">
     <!--there are other images here also that is why I need the class-->
   </nav>
</header>

JQuery的

$('logo').hover(
       function(){ $(this).addClass('animate') },
       function(){ $(this).removeClass('animate') }
);

CSS

header {
  background: none;
  height: 4em;
}

nav{
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 4em;
  font-size: 1em;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(192,192,192,0.3);
}

.logo {
  height: 3.5em;
  width: 3.5em;
  position: absolute;
  left: 50%;
  margin-left: -50px !important;
  display: block;
  margin-top: 4.5;
}

.animate {
  -webkit-animation: infinite-spinning 1s infinite linear;
}

@-webkit-keyframes infinite-spinning {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

https://jsfiddle.net/o2gxgz9r/42589/

Answer 1

您在班级选择器中缺少dot。它应该是.logo。

$('.logo').hover(
   function(){ $(this).addClass('animate') },
   function(){ $(this).removeClass('animate') }
);

header {
  background: none;
  height: 4em;
}

nav{
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 4em;
  font-size: 1em;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(192,192,192,0.3);
}

.logo {
  height: 3.5em;
  width: 3.5em;
  position: absolute;
  left: 50%;
  margin-left: -50px !important;
  display: block;
  margin-top: 4.5;
}

.animate {
  -webkit-animation: infinite-spinning 1s infinite linear;
}

@-webkit-keyframes infinite-spinning {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
   <nav>
     <img class="logo" src="images/circularLogo.png" alt="logo">
     <!--there are other images here also that is why I need the class-->
   </nav>
</header>

将类添加到图像类

1 个答案: