javascript - 将jQuery事件应用于CSS形状

Question

我已经设置了一个无序列表，用于响应将颜色类型从黑色更改为白色的jQuery函数。当定位类型时，我将每个标签设置为列表选项的单独类，例如：.home，.about等。在每个选项之后，我都使用.home：after包括css形状，并输入该形状的相关详细信息

我的问题是有一种方法也可以将jQuery函数应用于这些形状，即使它们没有在HTML中引用并且使用与a标签相同的类名也是如此。

$(function(){ //start of jQuery

  "use strict";

  $('#menu').hover(function(){ /*selects the menu li only if it has a child ul (sub-menu) and adds the hover event */

    $(this).find('ul').toggle();    /* selects the ul inside the li that has been rolled over and toggles the display on/off */

  });

});

.table{
  padding-top: 702px;
  display: table;
  margin: 0 auto;
}

#menu{
  min-width: 0px;
  list-style: none;
  text-align: center;
  overflow: hidden;
  margin-top: -41px;
}

#menu li{
  display: inline;
  position: absolute;
}
/* formating for type on navigation bar*/
a{  
  text-decoration: none;
  font-family: "Arial";
  color: white;
  font-size: 16pt;
  font-style: italic;
  font-weight: 900;
}

#menu a:hover{
  color: #000000;   
}

.home{
  margin-top: 0px;
  margin-left: -694px;
}

/* start of parallelogram */
.home:after{            
  content: " ";
  display: block;
  position: absolute;
  width: 138px;
  height: 38px;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -o-transform: skew(-45deg);
  background: black;
  margin-top: 0px;
  left: -410px;
  top: -9px;
  z-index: -1;
}
/* end of parallelogram*/

.about{
  margin-left: -370px;  
}

/* start of parallelogram */
.about:after{
  content: " ";
  display: block;
  position: absolute;
  width: 138px;
  height: 38px;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -o-transform: skew(-45deg);
  background: black;
  margin-top: 0px;
  left: -250px;
  top: -9px;
  z-index: -1;
}                       
/* end of parallelogram*/

.work{
  margin-left: -62px;   
}

/* start of parallelogram */
.work:after{            
  content: " ";
  display: block;
  position: absolute;
  width: 138px;
  height: 38px;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -o-transform: skew(-45deg);
  background: black;
  margin-top: 0px;
  left: -92px;
  top: -9px;
  z-index: -1;
}                       
/* end of parallelogram*/

.skills{
  margin-left: 95px;
}
/* start of parallelogram */
.skills:after{          
  content: " ";
  display: block;
  position: absolute;
  width: 138px;
  height: 38px;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -o-transform: skew(-45deg);
  background: black;
  margin-top: 0px;
  left: 66px;
  top: -9px;
  z-index: -1;
}   
/* end of parallelogram*/

.contact{
  margin-left: 244px;
}

/* start of parallelogram */
.contact:after{         
  content: " ";
  display: block;
  position: absolute;
  width: 150px;
  height: 38px;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -o-transform: skew(-45deg);
  background: black;
  margin-top: 0px;
  left: 224px;
  top: -9px;
  z-index: -1;
}                       
/* end of parallelogram*/

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

<div class="table">
  <ul id="menu">
    <li>
      <a href="#" class="home">HOME</a>
    </li>
    <li>
      <a href="#" class="about">ABOUT</a>
    </li>
    <li>
      <a href="#" class="work">WORK</a>
    </li>
    <li>
      <a href="#" class="skills">SKILLS</a>
    </li>
    <li>
      <a href="#" class="contact">CONTACT</a>
    </li>
  </ul>     
</div>

Answer 1

不确定为什么要应用jQuery，因为您可以使用CSS轻松地做到这一点，还可以像这样减少代码：

.table {
  display: table;
  margin: 0 auto;
}

#menu {
  min-width: 0px;
  list-style: none;
  text-align: center;
  overflow: hidden;
}

#menu li {
  display: inline-block;
}


/* formating for type on navigation bar*/

a {
  text-decoration: none;
  font-family: "Arial";
  color: white;
  font-size: 16pt;
  font-style: italic;
  font-weight: 900;
  position:relative;
  padding:10px 10px;
}

#menu a:hover {
  color: #000000;
}

/* start of parallelogram */

li a:after {
  content: " ";
  display: block;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -o-transform: skew(-45deg);
  background: black;
  z-index: -1;
}

#menu a:hover::after {
  background:#fff;
}

<div class="table">
  <ul id="menu">
    <li>
      <a href="#" class="home">HOME</a>
    </li>
    <li>
      <a href="#" class="about">ABOUT</a>
    </li>
    <li>
      <a href="#" class="work">WORK</a>
    </li>
    <li>
      <a href="#" class="skills">SKILLS</a>
    </li>
    <li>
      <a href="#" class="contact">CONTACT</a>
    </li>
  </ul>
</div>

但是，如果您仍然想使用jQuery，则可以考虑使用CSS变量，如下所示：

$('li a').hover(function() {
  $(this).css('--c','white');
},function() {
  $(this).css('--c','black');
})

.table {
  display: table;
  margin: 0 auto;
}

#menu {
  min-width: 0px;
  list-style: none;
  text-align: center;
  overflow: hidden;
}

#menu li {
  display: inline-block;
}


/* formating for type on navigation bar*/

a {
  text-decoration: none;
  font-family: "Arial";
  color: white;
  font-size: 16pt;
  font-style: italic;
  font-weight: 900;
  position:relative;
  padding:10px 10px;
  --c:#000;
}

#menu a:hover {
  color: #000000;
}

/* start of parallelogram */

li a:after {
  content: " ";
  display: block;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -o-transform: skew(-45deg);
  background: var(--c);
  z-index: -1;
}

#menu a:hover::after {
  background:#fff;
}

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<div class="table">
  <ul id="menu">
    <li>
      <a href="#" class="home">HOME</a>
    </li>
    <li>
      <a href="#" class="about">ABOUT</a>
    </li>
    <li>
      <a href="#" class="work">WORK</a>
    </li>
    <li>
      <a href="#" class="skills">SKILLS</a>
    </li>
    <li>
      <a href="#" class="contact">CONTACT</a>
    </li>
  </ul>
</div>