按钮右边缘附近闪烁

问题描述 投票：0回答：1

当您将光标移近“项目”的右边缘时，它开始闪烁。

:root {
    --light-gray: #979797;
    --dark-gray: #3D3D3D;
    --orange: #ff8400;
    --gray: #808080;
}

html, body {
    height: 100%;
    margin: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

li, .nav_links a, button {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: large;
    text-decoration: none;
    color: #edf0f1;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 6%;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: large;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--orange);
    padding-left: 6%;
}

.header nav {
    flex-grow: 1;
    text-align: center;
}

a {
    color: white;
}

.nav_links {
    list-style: none;
    color: white;
    display: flex;
    justify-content: center;
    position: relative;
}

.nav_links li {
    display: inline-block;
    padding: 0 20px;
    color: white;
}

.nav_links li a:hover {
    color: var(--orange);
}

.buttons_home {
    display: flex;
    justify-content: center;
    gap: 5%;
    margin-top: 10%;
    width: 100%;
    list-style: none;
    padding: 0;
}

.buttons_home li {
    width: 27%;
}

.home_button {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 20% 10%;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 125%;
    text-decoration: none;
    display: block;
    text-align: center;
}

.home_button:hover {
    background-color: transparent;
    border: 2px solid var(--orange);
    color: white;
}

.nav_links li a.active {
    color: var(--orange);
}

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: #000 url(bg.webp) repeat 0 0;
    flex-grow: 1;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: medium;
    border-top: 2px solid var(--orange);
    position: relative;
}

.footer p {
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Project dropdown */
.dropdown {
    position: relative;
}

.project_menu {
    display: none;
    top: 100%;
    left: 0;
    background-color: #000;
    border: 2px solid var(--orange);
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.project_menu li {
    padding: 10px 20px;
}

.project_menu li a {
    color: white;
    text-decoration: none;
}

.project_menu li a:hover {
    color: var(--orange);
}

.project_menu:hover {
    border: 2px solid white;
}

.dropdown:hover .project_menu {
    display: block;
    border-top: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="content">
            <ul class="buttons_home">
                <li><a class="home_button" href="about.html">About</a></li>
                <li><a class="home_button" href="resume.html">Resume</a></li>
                
                <li class="dropdown">
                    <a class="home_button" href="#">Projects</a>
                    <ul class="project_menu">
                        <li><a href="projects.html">Kalkulacka</a></li>
                        <li><a href="projects.html">Projekt2</a></li>
                        <li><a href="projects.html">Projekt3</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        
        <div class="footer">
            <p>© 2024</p>
        </div>
    </div>
</body>
</html>

:root {
    --light-gray: #979797;
    --dark-gray: #3D3D3D;
    --orange: #ff8400;
    --gray: #808080;
}

html, body {
    height: 100%;
    margin: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

li, .nav_links a, button {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: large;
    text-decoration: none;
    color: #edf0f1;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 6%;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: large;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--orange);
    padding-left: 6%;
}

.header nav {
    flex-grow: 1;
    text-align: center;
}

a {
    color: white;
}

.nav_links {
    list-style: none;
    color: white;
    display: flex;
    justify-content: center;
    position: relative;
}

.nav_links li {
    display: inline-block;
    padding: 0 20px;
    color: white;
}

.nav_links li a:hover {
    color: var(--orange);
}

.buttons_home {
    display: flex;
    justify-content: center;
    gap: 5%;
    margin-top: 10%;
    width: 100%;
    list-style: none;
    padding: 0;
}

.buttons_home li {
    width: 27%;
}

.home_button {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 20% 10%;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 125%;
    text-decoration: none;
    display: block;
    text-align: center;
}

.home_button:hover {
    background-color: transparent;
    border: 2px solid var(--orange);
    color: white;
}

.nav_links li a.active {
    color: var(--orange);
}

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: #000 url(bg.webp) repeat 0 0;
    flex-grow: 1;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: medium;
    border-top: 2px solid var(--orange);
    position: relative;
}

.footer p {
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Project dropdown */
.dropdown {
    position: relative;
}

.project_menu {
    display: none;
    top: 100%;
    left: 0;
    background-color: #000;
    border: 2px solid var(--orange);
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.project_menu li {
    padding: 10px 20px;
}

.project_menu li a {
    color: white;
    text-decoration: none;
}

.project_menu li a:hover {
    color: var(--orange);
}

.project_menu:hover {
    border: 2px solid white;
}

.dropdown:hover .project_menu {
    display: block;
    border-top: none;
}

https://jsfiddle.net/Matko223/opkd963x/15/

我尝试更改下拉菜单的宽度和位置，但无法弄清楚。 由于某种原因，下拉菜单比“项目”按钮长，因此边框无法正确连接。

.project_menu {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    left: -2px;
    background-color: transparent;
    border: 2px solid var(--orange);
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    width: calc(100% + 4px);
}

将鼠标悬停在“项目”按钮上后应该是什么样子： Expected result

视频（屏幕录像机无法捕获）： https://www.youtube.com/watch?v=A_r-XyMMwBs

当我在 Live Server 扩展上测试它时，情况更糟。

html css button drop-down-menu
1个回答
0
投票

出现问题的原因是，如果没有足够的空间，则显示下拉菜单时视口宽度会发生变化。

右侧出现滚动条，这会使视口变小。

列表项位于 Flex 内，因此当将项目悬停在上面时，它们会变得稍微小一些。如果光标非常靠近悬停时项目的右侧边缘，则项目会稍微变小，因此光标位于其外部，此时项目将返回到其原始宽度，因此光标位于其内部，依此类推，循环中，产生闪烁效果。

这取决于您希望菜单下拉时的显示效果，但作为示例，此代码片段不会通过显示下拉菜单来改变布局的其余部分（即保留页脚和其他任何内容）菜单位置绝对且具有较高的 z-index，因此可以在菜单部分后面的内容上看到。

:root {
  --light-gray: #979797;
  --dark-gray: #3D3D3D;
  --orange: #ff8400;
  --gray: #808080;
}

html,
body {
  height: 100%;
  margin: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

li,
.nav_links a,
button {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: large;
  text-decoration: none;
  color: #edf0f1;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 6%;
  background: #000 url(bg.webp) repeat 0 0;
  color: #edf0f1;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: large;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 2px solid var(--orange);
  padding-left: 6%;
}

.header nav {
  flex-grow: 1;
  text-align: center;
}

a {
  color: white;
}

.nav_links {
  list-style: none;
  color: white;
  display: flex;
  justify-content: center;
  position: relative;
}

.nav_links li {
  display: inline-block;
  padding: 0 20px;
  color: white;
}

.nav_links li a:hover {
  color: var(--orange);
}

.buttons_home {
  display: flex;
  justify-content: center;
  gap: 5%;
  margin-top: 10%;
  width: 100%;
  list-style: none;
  padding: 0;
}

.buttons_home li {
  width: 27%;
}

.home_button {
  background-color: transparent;
  color: white;
  border: 2px solid white;
  padding: 20% 10%;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 125%;
  text-decoration: none;
  display: block;
  text-align: center;
}

.home_button:hover {
  background-color: transparent;
  border: 2px solid var(--orange);
  color: white;
}

.nav_links li a.active {
  color: var(--orange);
}

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  background: #000 url(bg.webp) repeat 0 0;
  flex-grow: 1;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #000 url(bg.webp) repeat 0 0;
  color: #edf0f1;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: medium;
  border-top: 2px solid var(--orange);
  position: relative;
}

.footer p {
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}


/* Project dropdown */

.dropdown {
  position: relative;
}

.project_menu {
  display: none;
  top: 100%;
  left: 0;
  background-color: #000;
  border: 2px solid var(--orange);
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  position: absolute;
  z-index: 1;
}

.project_menu li {
  padding: 10px 20px;
}

.project_menu li a {
  color: white;
  text-decoration: none;
}

.project_menu li a:hover {
  color: var(--orange);
}

.project_menu:hover {
  border: 2px solid white;
}

.dropdown:hover .project_menu {
  display: block;
  border-top: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <div class="content">
      <ul class="buttons_home">
        <li><a class="home_button" href="about.html">About</a></li>
        <li><a class="home_button" href="resume.html">Resume</a></li>

        <li class="dropdown">
          <a class="home_button" href="#">Projects</a>
          <ul class="project_menu">
            <li><a href="projects.html">Kalkulacka</a></li>
            <li><a href="projects.html">Projekt2</a></li>
            <li><a href="projects.html">Projekt3</a></li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="footer">
      <p>© 2024</p>
    </div>
  </div>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.