我创建了一个无序列表,我已设置为响应jQuery函数,该类型将颜色从黑色更改为白色。在定位类型时,我将每个标签设置为列表选项ex:.home,.about等的单独类。在每个选项之后,我通过使用.home包含css形状:after并输入形状的相关细节
我的问题是有一种方法可以将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>
不知道你为什么要应用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>