gpt4 book ai didi

html - 悬停时展开底部边框不起作用?

转载 作者:行者123 更新时间:2023-11-28 15:51:03 25 4
gpt4 key购买 nike

我正在尝试做的事情和我正在使用的(部分)代码是在另一个问题的答案中,特别是“从中心展开”答案 here. describe 效果根本没有发生任何事情。有什么想法吗?

HTML

<ul id="items">
<li> <span id="menuBtnOff" onclick="menuIn()">&#x2573;</span></li>
<li> <a href="#about" rel=""> About Me </a> </li>
<li> <a href="#profile" rel=""> What I can do for you </a> </li>
<li> <a href="#footer" rel=""> Contact </a> </li>
</ul>

萨斯

li:hover
a
cursor: pointer
color: $menuGreen
transition: all 0.1s ease-in-out

li, #menuBtnOn
transition: all 0.1s ease
text-indent: initial
resize: none
float: right
display: inline-block
padding: 15px
line-height: 5px
font-family: 'Roboto', sans-serif
font-weight: lighter
font-size: 14px
color: black
&:not(:first-child)
border-right: 1px solid rgba(37, 37, 37, 0.28)
a:after
content: ''
border-bottom: solid 3px $menuGreen
transform: scaleX(0)
transition: transform 250ms ease-in-out
a:hover:after
transform: scaleX(1)

我的完整代码已记录在案 here

最佳答案

您的代码存在两个主要问题(语法错误除外):

  • 您没有将 display:block 设置为 a:after 伪元素。这是强制性的,因为它为伪元素提供了高度和宽度。没有这个,伪元素将为 0 x 0px,因此您将看不到任何东西。
  • 你的 Sass 代码缩进的方式(我假设你使用的是 Sass 语法而不是基于缺少冒号、大括号和缩进的 SCSS 语法)意味着 a:hover:after 选择器是嵌套在 a:after 选择器下,因此最终选择器输出将是 .menuHolder li a:after a:hover:after。这不匹配任何元素,因此悬停时不会发生任何事情。

除了这两个变化,还有 3 个地方的缩进不一致。那就是有些区域提供了 5/7 空间而不是正常的 2/4/6/...

Sass 语法中的固定代码如下。具有等效 SCSS 语法的演示可用 here .我在演示中使用了 SCSS 语法,因为 JSFiddle 不支持 Sass 语法。

a:link, a:visited
text-decoration: none
color: black

.menu
white-space: nowrap
overflow: hidden

.menuHolder
overflow: hidden
position: fixed
display: inline-block
top: 0
right: 0
width: 110%
padding: 6px 0 0
background-color: rgba(70, 106, 135, 0.65)
text-align: right
transition: all 1s ease-in-out
max-height: 37px
z-index: 10

ul
margin: 0
padding: 0

li:hover
a
cursor: pointer
color: $menuGreen
transition: all 0.1s ease-in-out

li, #menuBtnOn
transition: all 0.1s ease
text-indent: initial
resize: none
float: right
display: inline-block
padding: 15px
line-height: 5px
font-family: "Roboto", sans-serif
font-weight: lighter
font-size: 14px
color: black

&:not(:first-child)
border-right: 1px solid rgba(37, 37, 37, 0.28)

a:after
display: block
content: ""
border-bottom: solid 3px $menuGreen
transform: scaleX(0)
transition: transform 250ms ease-in-out
margin-top: 10px

a:hover:after
transform: scaleX(1)

#menuBtnOff,
#menuBtnOn
transition: all 0.3s ease
cursor: pointer
color: black

&:hover
color: $menuGreen

#menuBtnOn
font-size: 20px
float: left

我建议的另一个改进是将 :hover 效果放在 li 本身上(也就是说,将选择器设置为 .menuHolder li :hover a:after 而不是 .menuHolder li a:hover:after) 因为文本颜色的变化发生在 :hover li 本身,这将使它保持一致。

Here是这个版本的演示。

关于html - 悬停时展开底部边框不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41867262/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com