javascript - 使用mouseenter进行水平翻译，mouseleave功能不起作用

当我将鼠标悬停在列表中时，我想使一些文本水平翻译。在这种情况下，当我将鼠标悬停在“ #java”上时，我希望将“ .java1”转换。

$(document).ready(function() {
  $("#java").on("mouseenter", function() {
    $(".java1").transition({
      x: "+=70"
    }, 10);
  });

  $("#java").on("mouseleave", function() {
    $(".java1").transition({
      x: "-=70"
    }, 10);
  });
});

@media (min-width:601px) {
  .quarter {
    width: 24.99999%!important;
  }
  .third {
    width: 33.33333%!important;
  }
  .twothird {
    width: 66.66666%!important;
  }
}

p {
  color: #757575!important;
}

ul {
  text-align: left;
}

li {
  color: #333333!important;
  text-decoration: none;
  list-style-type: none;
  float: left;
  padding-left: 17px;
  padding-right: 17px;
  padding-bottom: 10px;
  margin-top: 3px;
  margin-right: 2px;
  height: 30px;
}

.box {
  width: 100px;
  height: 30px;
  top: 750px;
  position: absolute;
  text-align: left;
  border-radius: 5px;
  float: left;
  margin-left: -50px;
}

.box-container {
  background-color: #f1f1f1;
  color: #009688;
  padding: 5px;
}

.content {
  max-width: 980px;
  margin: auto;
}

.center {
  text-align: center!important;
}

.round-xlarge {
  border-radius: 16px;
}

.teal {
  color: #fff!important;
  background-color: #009688!important;
}

.hover-white:hover {
  color: #000!important;
  background-color: #fff!important;
}

.margin-right {
   margin-right : 16px!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="box-container">
    <p style="text-indent: 5px;" class="java1">public</p>
    <p style="text-indent: 5px;" class="java1">static</p>
    <p style="text-indent: 5px;" class="java1">void</p>
    <p style="text-indent: 5px;" class="java1">main</p>
    <p style="text-indent: 5px;" class="java1">(String[] args)</p>
  </div>
</div>

<div class="content">
  <div class="third center">
    <div class="center">
      <ul>
        <p><i class="fa fa-asterisk margin-right teal-text"></i>My Skill Set</p>
        <li class="round-xlarge teal hover-white" style="width : 23%" id="java">Java</li>
        <li class="round-xlarge teal hover-white" style="width : 43%">Spring MVC</li>
        <li class="round-xlarge teal hover-white" style="width : 28%">HTML5</li>
        <li class="round-xlarge teal hover-white" style="width : 23%">CSS</li>
        <li class="round-xlarge teal hover-white" style="width : 40%">Javascript</li>
        <li class="round-xlarge teal hover-white" style="width : 28%">jQuery</li>
        <p>...................................................</p>
      </ul>
      <ul>
        <p><i class="fa fa-globe margin-right teal-text"></i>Language</p>
        <li class="round-xlarge teal hover-white" style="width : 30%">English</li>
        <li class="round-xlarge teal hover-white" style="width : 38%">Indonesia</li>
        <li class="round-xlarge teal hover-white" style="width : 26%">Korea</li>
      </ul>
    </div>
  </div>
</div>

这些框隐藏在负边距中，我希望它在#java中将鼠标悬停后显示。


但是，盒子没有动。我无法指出脚本的实际问题是什么？请帮忙，谢谢！

最佳答案

您必须在jQuery中使用css方法并指定目标transform css属性，我向您发送示例

$(document).ready(function() {
  $("#java").on("mouseenter", function() {
    $(".java1").css('transform','translateX(-70px)');
  });

  $("#java").on("mouseleave", function() {
    $(".java1").css('transform','translateX(70px)');
  });
});

@media (min-width:601px) {
  .quarter {
    width: 24.99999%!important;
  }
  .third {
    width: 33.33333%!important;
  }
  .twothird {
    width: 66.66666%!important;
  }
}

p {
  color: #757575!important;
}

ul {
  text-align: left;
}

li {
  color: #333333!important;
  text-decoration: none;
  list-style-type: none;
  float: left;
  padding-left: 17px;
  padding-right: 17px;
  padding-bottom: 10px;
  margin-top: 3px;
  margin-right: 2px;
  height: 30px;
}

.box {
  width: 100px;
  height: 30px;
  top: 750px;
  position: absolute;
  text-align: left;
  border-radius: 5px;
  float: left;
  margin-left: -50px;
}

.box-container {
  background-color: #f1f1f1;
  color: #009688;
  padding: 5px;
}

.content {
  max-width: 980px;
  margin: auto;
}

.center {
  text-align: center!important;
}

.round-xlarge {
  border-radius: 16px;
}

.teal {
  color: #fff!important;
  background-color: #009688!important;
}

.hover-white:hover {
  color: #000!important;
  background-color: #fff!important;
}

.margin-right {
   margin-right : 16px!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="box-container">
    <p style="text-indent: 5px;" class="java1">public</p>
    <p style="text-indent: 5px;" class="java1">static</p>
    <p style="text-indent: 5px;" class="java1">void</p>
    <p style="text-indent: 5px;" class="java1">main</p>
    <p style="text-indent: 5px;" class="java1">(String[] args)</p>
  </div>
</div>

<div class="content">
  <div class="third center">
    <div class="center">
      <ul>
        <p><i class="fa fa-asterisk margin-right teal-text"></i>My Skill Set</p>
        <li class="round-xlarge teal hover-white" style="width : 23%" id="java">Java</li>
        <li class="round-xlarge teal hover-white" style="width : 43%">Spring MVC</li>
        <li class="round-xlarge teal hover-white" style="width : 28%">HTML5</li>
        <li class="round-xlarge teal hover-white" style="width : 23%">CSS</li>
        <li class="round-xlarge teal hover-white" style="width : 40%">Javascript</li>
        <li class="round-xlarge teal hover-white" style="width : 28%">jQuery</li>
        <p>...................................................</p>
      </ul>
      <ul>
        <p><i class="fa fa-globe margin-right teal-text"></i>Language</p>
        <li class="round-xlarge teal hover-white" style="width : 30%">English</li>
        <li class="round-xlarge teal hover-white" style="width : 38%">Indonesia</li>
        <li class="round-xlarge teal hover-white" style="width : 26%">Korea</li>
      </ul>
    </div>
  </div>
</div>

关于javascript - 使用mouseenter进行水平翻译，mouseleave功能不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47728897/