最近我一直试图强调下划线悬停效果。我使用过一些以前的JavaScript,但问题似乎是当我将鼠标悬停在链接上时,它会过早停止。我相信,我必须在JS中设置保证金左边的问题,但我不确定下一步该在哪里
$(".underline-nav").css("width", $("#one").width());
$(".underline-nav").css("margin-left", $("#one").css("margin-left"));
var unav = $(".underline-nav");
$('nav a').mouseover(function() {
$(".underline-nav").css("transition", "all ease 0.43s");
var position = $(this).position();
unav.css({
"width": $(this).width(),
"margin-left": $(this).css("margin-left"),
"left": position.left
});
})
$('nav').mouseleave(function() {
$(".underline-nav").css("transition", "all ease 0.7s");
var firstChild = $(this).find('a:first-child');
var position = firstChild.position();
unav.css({
"width": firstChild.width(),
"margin-left": firstChild.css("margin-left"),
"left": position.left
});
})
html {
background-color: blue;
}
.underline-nav {
background: tomato;
height: .25rem;
position: absolute;
top: 6vh;
transition: all ease 0.37s;
z-index: 0;
}
.mainnav {
padding-top: 1vh;
width: 100%;
position: absolute;
z-index: 4;
font-size: 0.8vw;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
nav img {
padding-left: 4vw;
height: 3.5vw;
}
a {
color: #fff;
text-decoration: none;
font-weight: 700;
padding-left: 4vw;
letter-spacing: 0.4em;
}
.sectionone {
height: 100vh;
background: url('media/bg.jpg') no-repeat center center fixed;
background-size: cover;
color: #fff;
font-family: 'Raleway';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div class="mainnav">
<a id="one" href="#">HOME</a>
<a href="#">LINK 1</a>
<a href="#">LINK 2</a>
<img src="/media/Asset 1.png" alt="logo">
<a href="#">LINK 3</a>
<a href="#">LINK 4</a>
<a href="#">LINK 5</a>
<div class="underline-nav">
</div>
</div>
</nav>
CODEPEN:https://codepen.io/anon/pen/xeYGbK
多谢你们
您还必须考虑链接中的填充和最终的行高。 css更新可以是:
.underline-nav {
margin-top:1.2vw;/* set underline under the link */
transform : translatex(4vw);/* padding value */
}
但是z zxswい
https://codepen.io/anon/pen/ZZrGvd
$(".underline-nav").css("width", $("#one").width());
$(".underline-nav").css("margin-left", $("#one").css("margin-left"));
var unav = $(".underline-nav");
$('nav a').mouseover(function() {
$(".underline-nav").css("transition", "all ease 0.43s");
var position = $(this).position();
unav.css({
"width": $(this).width(),
"margin-left": $(this).css("margin-left"),
"left": position.left
});
})
$('nav').mouseleave(function() {
$(".underline-nav").css("transition", "all ease 0.7s");
var firstChild = $(this).find('a:first-child');
var position = firstChild.position();
unav.css({
"width": firstChild.width(),
"margin-left": firstChild.css("margin-left"),
"left": position.left
});
})
html {
background-color: blue;
}
body {
margin: 0;
}
.underline-nav {
background: tomato;
height: .25rem;
position: absolute;
top: 6vh;
margin-top: 1.2vw;
transform: translatex(4vw);
transition: all ease 0.37s;
z-index: 0;
}
.mainnav {
padding-top: 1vh;
width: 100%;
position: absolute;
z-index: 4;
font-size: 0.8vw;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
nav img {
padding-left: 4vw;
height: 3.5vw;
}
a {
color: #fff;
text-decoration: none;
font-weight: 700;
padding-left: 4vw;
letter-spacing: 0.4em;
}
.sectionone {
height: 100vh;
background: url('media/bg.jpg') no-repeat center center fixed;
background-size: cover;
color: #fff;
font-family: 'Raleway';
}
我已将<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div class="mainnav">
<a id="one" href="#">HOME</a>
<a href="#">LINK 1</a>
<a href="#">LINK 2</a>
<img src="/media/Asset 1.png" alt="logo">
<a href="#">LINK 3</a>
<a href="#">LINK 4</a>
<a href="#">LINK 5</a>
<div class="underline-nav">
</div>
</div>
</nav>
的padding-left
更改为a
,它似乎完美无缺。我希望这就是你想要的
margin-left
$(".underline-nav").css("width", $("#one").width());
$(".underline-nav").css("margin-left", $("#one").css("margin-left"));
var unav = $(".underline-nav");
$('nav a').mouseover(function() {
$(".underline-nav").css("transition", "all ease 0.43s");
var position = $(this).position();
unav.css({
"width": $(this).width(),
"margin-left": $(this).css("margin-left"),
"left": position.left
});
})
$('nav').mouseleave(function() {
$(".underline-nav").css("transition", "all ease 0.7s");
var firstChild = $(this).find('a:first-child');
var position = firstChild.position();
unav.css({
"width": firstChild.width(),
"margin-left": firstChild.css("margin-left"),
"left": position.left
});
})
html {
background-color: blue;
}
.underline-nav {
background: tomato;
height: .25rem;
position: absolute;
top: 6vh;
transition: all ease 0.37s;
z-index: 0;
}
.mainnav {
padding-top: 1vh;
width: 100%;
position: absolute;
z-index: 4;
font-size: 0.8vw;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
nav img {
padding-left: 4vw;
height: 3.5vw;
}
a {
color: #fff;
text-decoration: none;
font-weight: 700;
margin-left: 4vw;
letter-spacing: 0.4em;
}
.sectionone {
height: 100vh;
background: url('media/bg.jpg') no-repeat center center fixed;
background-size: cover;
color: #fff;
font-family: 'Raleway';
}
在<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div class="mainnav">
<a id="one" href="#">HOME</a>
<a href="#">LINK 1</a>
<a href="#">LINK 2</a>
<img src="/media/Asset 1.png" alt="logo">
<a href="#">LINK 3</a>
<a href="#">LINK 4</a>
<a href="#">LINK 5</a>
<div class="underline-nav">
</div>
</div>
</nav>
元素的CSS中,将填充更改为边距(以便保持间距而不影响元素的大小),并将文本居中对齐:
a
但是:ぁzxswい