从徽标中删除特定的悬停效果，同时使其保持指向首页的链接

时间：2019-06-26 04:23:14

标签： html css

我在网站上寻找答案没有任何运气。我将徽标放在导航链接之间的标题中。我在链接上添加了下划线悬停效果，该效果也添加到了徽标中。我想出了如何从徽标中删除悬停效果（指针事件：无；），但这也使我无法将徽标作为可单击的链接返回到我的主页。我试着将徽标放在一个单独的div中，以为解决该问题会更容易，但是后来我花了3个小时试图正确放置它们（显然，我是Web构建领域的新手）。所以现在我回到了原始代码，希望在这里得到一些帮助。总结一下：如何在导航链接上保持悬停效果，同时将其从徽标中删除，并使徽标保持为希望页面的可点击链接？预先感谢您的帮助。 

.header {
  display: flex;
  width: 100%;
  margin-top: 0;
  padding-top: 10px;
  height: 20%;
  align-items: center;
  justify-content: center;
}

.cc_nav {
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
}

a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
  margin: 0 40px;
  font-family: Tenar Sans;
  font-size: .8em;
}

a {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}

a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: rgb(192, 192, 192);
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

#logo_Claire {
  height: auto;
  width: auto;
  max-height: 140px;
  max-width: 300px;
}

.noHover {
  pointer-events: none;
}
<header>
  <div class="cc_nav" id="centered_nav">
    <a href="">HOME</a>
    <a href="">SERVICES</a>
    <a href="">ABOUT</a>
    <a href="index.html" class="noHover"><img src="images/logo_2.png" alt="Claire Crawford" id="logo_Claire" /></a>
    <a href="">PORTFOLIO</a>
    <a href="">BLOG</a>
    <a href="">GET IN TOUCH</a>
  </div>
</header>

4 个答案:

答案 0 :(得分：1)

只需在CSS-

下添加 
.noHover:hover::before {
    background: none;
    visibility: hidden;
}

并尝试以下工作示例，也许可以为您提供帮助。

.header {
  display: flex;
  width: 100%;
  margin-top: 0;
  padding-top: 10px;
  height: 20%;
  align-items: center;
  justify-content: center;
}

.cc_nav {
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
}

a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
  margin: 0 40px;
  font-family: Tenar Sans;
  font-size: .8em;
}

a {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}

a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: rgb(192, 192, 192);
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

#logo_Claire {
  height: auto;
  width: auto;
  max-height: 140px;
  max-width: 300px;
}

.noHover:hover::before {
  background: none;
  visibility: hidden;
}
<header>
  <div class="cc_nav" id="centered_nav">
    <a href="">HOME</a>
    <a href="">SERVICES</a>
    <a href="">ABOUT</a>
    <a href="index.html" class="noHover"><img src="images/logo_2.png" alt="Claire Crawford" id="logo_Claire" /></a>
    <a href="">PORTFOLIO</a>
    <a href="">BLOG</a>
    <a href="">GET IN TOUCH</a>
  </div>
</header>

答案 1 :(得分：0)

您可以尝试一下，它使用了定位标记的默认属性，因此您需要覆盖它，因此请在您的类属性中指定重要的

.noHover {
    pointer-events: none !important;
  }

答案 2 :(得分：0)

只需添加css，以免将鼠标悬停在徽标上并点击即可

a.noHover:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
}


  header{ 
    display: flex;
    width: 100%;
    margin-top: 0;
    padding-top: 10px;
    height: 20%;
    align-items: center;
    justify-content: center;
  }

  .cc_nav {
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
  }

  a{
    text-decoration: none;
    color: rgba(0,0,0,0.8);
    margin: 0 40px;
    font-family: Tenar Sans;
    font-size: .8em;

  }

  a {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-osx-font-smoothing: grayscale;
        position: relative;
        overflow: hidden;
   }

   a:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 1px;
      bottom: 0;
      left: 0;
      background-color: rgb(192,192,192); 
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
    }

    a:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }

    a.noHover:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
    }


  #logo_Claire {
    height: auto;
    width: auto;
    max-height: 140px;
    max-width: 300px;
  }
<header>
  <div class="cc_nav" id="centered_nav">
    <a href="">HOME</a>
    <a href="">SERVICES</a>
    <a href="">ABOUT</a>
    <a href="index.html" class="noHover"><img src="https://dummyimage.com/100x50/000/fff" alt="Claire Crawford" id="logo_Claire" /></a>
    <a href="">PORTFOLIO</a>
    <a href="">BLOG</a>
    <a href="">GET IN TOUCH</a>
  <div>   
</header>

答案 3 :(得分：0)

仅将类分配给导航链接，然后在其中定义链接和悬停样式。

    <div class="cc_nav" id="centered_nav">
        <a class="hover" href="">HOME</a>
        <a class="hover" href="">SERVICES</a>
        <a class="hover" href="">ABOUT</a>
        <a href="index.html" class="noHover"><img src="images/logo_2.png" alt="Claire Crawford" id="logo_Claire" /></a>
        <a class="hover" href="">PORTFOLIO</a>
        <a class="hover" href="">BLOG</a>
        <a class="hover" href="">GET IN TOUCH</a>
        <div>

CSS：

.cc_nav {
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
}

a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
  margin: 0 40px;
  font-family: Tenar Sans;
  font-size: 0.8em;
}

.hover {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}

.hover:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: rgb(192, 192, 192);
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.hover:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

#logo_Claire {
  height: auto;
  width: auto;
  max-height: 140px;
  max-width: 300px;
}

Here is a Pen

相关问题
最新问题