Question

Helow Guys，我只是按照YT中的一些教程创建了一个菜单链接设计，但是，我在将链接悬停在徽标图像空间上的链接时遇到了一些错误，从而使图像徽标无法清晰看到。我想要的是将鼠标悬停在链接上时会创建填充或边距，以使图像徽标不会干扰并将徽标保留在原处。这是我的代码

.logo {
    height: 65px;
    width: 65px;
}

.firstNav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.firstNav > a {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 12px;
    transition: 0.5s;
    color: #000;
}

nav:hover a {
    transform: scale(1.5);
    opacity: .6;
    filter: blur(4px);
}

nav .firstNav a:hover {
    transform: scale(2);
    opacity: 1;
    filter: blur(0);
}

nav .firstNav a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2575aa;
    transition: 0.5s;
    transform-origin: right;
    transform: scaleX(0);
    z-index: -1;
}

nav .firstNav a:hover::before{
    transition: 0.5s;
    transform-origin: left;
    transform: scaleX(1);
}

            <nav>
                <div class="firstNav">
                <a href="#" class="blurLink">Home</a>
                <a href="#" class="blurLink">Blog</a>
                <a href="#" class="blurLink">Portfolio</a>
                <img src="https://i.stack.imgur.com/JWQJm.png" alt="logo" class="logo">
                <a href="#" class="blurLink">Progress</a>
                <a href="#" class="blurLink">About</a>
                <a href="#" class="blurLink">Contact</a>
                </div>
          </nav>

Answer 1

我认为，鉴于您正在尝试执行的操作，它总是会侵犯徽标的空间，因此，Smollet777答案的另一种选择是您可以调整其行为以推出项目，因此与文本的宽度无关紧要内容是。

您可以将导航项一分为二，以将徽标固定放置，并使用CSS过渡来扩展其他项，如下所示：

.logo {
  height: 65px;
  width: 65px;
}

.firstNav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  width: 800px;
}

.blurLink {
  position: relative;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 12px;
  transition: font-size 1s, padding 1s;
  color: #000;
}

.blurLink:hover {
  font-size: 32px;
  padding: 0 20px;
  background: #2575aa;
}

.navGroup {
  width: 40%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.navGroup2 {
  width: 40%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

<nav>
  <div class="firstNav">
    <div class="navGroup">
      <a href="#" class="blurLink">Home</a>
      <a href="#" class="blurLink">Blog</a>
      <a href="#" class="blurLink">Portfolio</a>
    </div>
    <img src="https://i.stack.imgur.com/JWQJm.png" alt="logo" class="logo">
    <div class="navGroup2">
      <a href="#" class="blurLink">Progress</a>
      <a href="#" class="blurLink">About</a>
      <a href="#" class="blurLink">Contact</a>
    </div>
  </div>
</nav>

Answer 2

您可以使用element:nth-child(index)定位CSS中的特定元素。

nav .firstNav a:nth-child(3):hover {
  position: relative;
  left: -55px;
}

nav .firstNav a:nth-child(5):hover {
  position: relative;
  right: -55px;
}

.logo {
  height: 65px;
  width: 65px;
}

.firstNav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.firstNav>a {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 12px;
  transition: 0.5s;
  color: #000;
}

nav:hover a {
  transform: scale(1.5);
  opacity: .6;
  filter: blur(4px);
}

nav .firstNav a:hover {
  transform: scale(2);
  opacity: 1;
  filter: blur(0);
}

nav .firstNav a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2575aa;
  transition: 0.5s;
  transform-origin: right;
  transform: scaleX(0);
  z-index: -1;
}

nav .firstNav a:hover::before {
  transition: 0.5s;
  transform-origin: left;
  transform: scaleX(1);
}

<nav>
  <div class="firstNav">
    <a href="#" class="blurLink">Home</a>
    <a href="#" class="blurLink">Blog</a>
    <a href="#" class="blurLink">Portfolio</a>
    <img src="https://i.stack.imgur.com/JWQJm.png" alt="logo" class="logo">
    <a href="#" class="blurLink">Progress</a>
    <a href="#" class="blurLink">About</a>
    <a href="#" class="blurLink">Contact</a>
  </div>
</nav>

Answer 3

使用它，你会没事的。

.firstNav>a:nth-of-type(3):hover {
    transform: translateX(-55px) scale(2);
}

.firstNav>a:nth-of-type(4):hover {
    transform: translateX(55px) scale(2);
}

悬停菜单链接时保留图像

3 个答案: