如何使悬停在活动按钮上不使用悬停效果？

Posted 2023-03-06

【中文标题】如何使悬停在活动按钮上不使用悬停效果？

【英文标题】：How to make hovering over active button not use hover effect?

【发布时间】：2017-09-07 00:53:44

【问题描述】：

我有一个对按钮具有悬停效果的导航栏。此外，每当页面处于活动状态时，该按钮的右侧都有一个边框，以显示它是当前打开的页面。基本上我想要的是活动按钮没有悬停效果，因为悬停效果覆盖了边框。

$(window).load(function() 
    // Animate loader off screen
    $(".loader").fadeOut("slow");;
);

function homeTransition()
   
    $(this).toggleClass('activePage');

    if(document.getElementById("aboutContent").className.indexOf("slideInLeft") !== -1)
        document.getElementById("aboutContent").className = " animated slideOutRight";
    
    if(document.getElementById("projectsContent").className.indexOf("slideInUp") !== -1)
        document.getElementById("projectsContent").className = " animated slideOutUp";
    
    if(document.getElementById("contactContent").className.indexOf("slideInUp") !== -1)
        document.getElementById("contactContent").className = " animated slideOutUp";
    
    document.getElemenatById("al-saba").className = " animated bounceInDown";


function aboutTransition()
   
    document.getElementById("al-saba").className = " animated bounceOutUp";
    document.getElementById("aboutContent").style.visibility = "visible";
    document.getElementById("aboutContent").className = "activePage animated slideInLeft";

    document.getElementById("projectsContent").className = " animated slideOutUp";
    document.getElementById("contactContent").className = " animated slideOutUp";


function projectsTransition()
   
    $(this).toggleClass('activePage');

    document.getElementById("al-saba").className = " animated bounceOutUp";
    document.getElementById("projectsContent").style.visibility = "visible";
    document.getElementById("projectsContent").className = "activePage animated slideInUp";

    document.getElementById("aboutContent").className = " animated slideOutRight";
    document.getElementById("contactContent").className = " animated slideOutUp";


function contactTransition()

    $(this).toggleClass('activePage');

    document.getElementById("al-saba").className = " animated bounceOutUp";
    document.getElementById("contactContent").style.visibility = "visible";
    document.getElementById("contactContent").className = "activePage animated slideInUp";

    document.getElementById("aboutContent").className = " animated slideOutRight";
    document.getElementById("projectsContent").className = " animated slideOutUp";


//Menu
$(function() 
    function expand() 
        $(this).toggleClass("on");
        $(".menu").toggleClass("active");
    ;

    $('.noselect').click(function() 
        $('.noselect').removeClass('activePage');
        $(this).toggleClass('activePage');
    );

    $(".button").on('click', expand);
);

body 
     font-family: "Source Sans Pro", sans-serif;
     color: #ccc;
     z-index: -100;
     background-color: black;
     overflow: hidden;
     text-align: center;

 .menu
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     padding: 0;
     overflow: hidden;
     background: rgba(0, 0, 0, 0.6);
     width: 250px;
     box-sizing: border-box;
     transition: all 250ms;
     -webkit-transform: translateZ(0) translateX(-100%);
     transform: translateZ(0) translateX(-100%);
     text-align:center;
     box-shadow: 0 0 10px #000;

 .active 
     transform: translateZ(0) translateX(0);
     transform: translateZ(0) translateX(0);
     -webkit-transition: 0.4s;
     transition: 0.4s;
     color: #e5e5e5;

 ul
     padding:0;
     list-style:none;
     font-size:14px;

 li
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
     font-family: "Raleway";
     width: 250px;
     padding: 40px 5px;
     color: #a7a7a7;
     font-size: 1.8em;
     font-weight: 300;
     cursor: pointer;
     transition: all .4s ease-in-out;

 li:hover 
     color: white;
     background-color: #38d8b4;
     -o-transition:.6s;
     -ms-transition:.6s;
     -moz-transition:.6s;
     -webkit-transition:.6s;
     transition:.6s;

 .liSeperator 
     width: 100%;
     padding: 1px;
     color: (0, 0, 0, .4);

 .content 
     position: relative;
     width: 240px;

 .button 
     width:22px;
     height:40px;
     margin:80px 97px;
     padding: 10px;
     cursor:pointer;
     transition: all .2s ease-in-out;

 .button:hover
     transform: scale(1.2);

 .line 
     width: 40px;
     height: 2px;
     background-color:#fff;
     transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;

 .line.first
     transform: translateX(-10px) translateY(22px) rotate(-90deg);

 .line.second
     transform: translateX(-10px) translateY(19px) rotate(0deg);

 .button.on .line.top
     width: 40px;
     transform: translateX(-10px) translateY(20px) rotate(45deg);

 .button.on .line.bottom
     width: 40px;
     transform: translateX(-10px) translateY(17px)rotate(-45deg);

 .activePage li 
     transition: all .1s ease-in-out;
     color: white;
     border-right: 8px solid #38d8a1;

<div id="wrapper">
                                    <div class="menu">
                                        <h1 class="noselect">MENU</h1>
                                        <ul>
                                                <li id="home" class="noselect" onclick="homeTransition()">
                                                    <i class="fa fa-home"></i> home
                                                </li>
                                            <div class="liSeperator"></div>
                                                <li id="about" class="noselect" onclick="aboutTransition()">
                                                    <i class="fa fa-user"></i> about                                        
                                                </li>
                                            <div class="liSeperator"></div>
                                                <li id="projects" class="noselect" onclick="projectsTransition()">
                                                    <i class="fa fa-code"></i> projects
                                                </li>
                                            <div class="liSeperator"></div>
                                                <li id="contact" class="noselect" onclick="contactTransition()">
                                                    <i class="fa fa-paper-plane"></i> contact
                                                </li>
                                        </ul>
                                    </div>
                                    <div class="content animated fadeInDown">
                                        <div class="button">
                                            <div class="line first top"></div>
                                            <div class="line second bottom"></div>
                                        </div>
                                    </div>

【问题讨论】：

您的 html 无效 - div 和 li 需要交换 - ul 不能将 div 作为直接子级

好的，我改了html

您的 javascript 有错误；请修复它。

【参考方案1】：

正如@Pete 所说，您的 HTML 无效。但是您可以使用 :not() 和 :hover 选择器来排除 .activePage 类。

所以不要使用li:hover，而是使用.noselect:not(.activePage) li:hover

//Menu
$(function() 
    function expand() 
        $(this).toggleClass("on");
        $(".menu").toggleClass("active");
    ;

    $('.noselect').click(function() 
        $('.noselect').removeClass('activePage');
        $(this).toggleClass('activePage');
    );

    $(".button").on('click', expand);
);

body 
  font-family: "Source Sans Pro", sans-serif;
  color: #ccc;
  z-index: -100;
  background-color: black;
  overflow: hidden;
  text-align: center;


.menu 
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.6);
  width: 250px;
  box-sizing: border-box;
  transition: all 250ms;
  -webkit-transform: translateZ(0) translateX(-100%);
  transform: translateZ(0) translateX(-100%);
  text-align: center;
  box-shadow: 0 0 10px #000;


.active 
  transform: translateZ(0) translateX(0);
  transform: translateZ(0) translateX(0);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  color: #e5e5e5;


ul 
  padding: 0;
  list-style: none;
  font-size: 14px;


li 
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-family: "Raleway";
  width: 250px;
  padding: 40px 5px;
  color: #a7a7a7;
  font-size: 1.8em;
  font-weight: 300;
  cursor: pointer;
  transition: all .4s ease-in-out;


.noselect:not(.activePage) li:hover 
  color: white;
  background-color: #38d8b4;
  -o-transition: .6s;
  -ms-transition: .6s;
  -moz-transition: .6s;
  -webkit-transition: .6s;
  transition: .6s;


.liSeperator 
  width: 100%;
  padding: 1px;
  color: (0, 0, 0, .4);


.content 
  position: relative;
  width: 240px;


.button 
  width: 22px;
  height: 40px;
  margin: 80px 97px;
  padding: 10px;
  cursor: pointer;
  transition: all .2s ease-in-out;


.button:hover 
  transform: scale(1.2);


.line 
  width: 40px;
  height: 2px;
  background-color: #fff;
  transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;


.line.first 
  transform: translateX(-10px) translateY(22px) rotate(-90deg);


.line.second 
  transform: translateX(-10px) translateY(19px) rotate(0deg);


.button.on .line.top 
  width: 40px;
  transform: translateX(-10px) translateY(20px) rotate(45deg);


.button.on .line.bottom 
  width: 40px;
  transform: translateX(-10px) translateY(17px)rotate(-45deg);


.activePage li 
  transition: all .1s ease-in-out;
  color: white;
  border-right: 8px solid #38d8a1;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="menu">
    <h1 class="noselect">MENU</h1>
    <ul>
      <div id="home" class="noselect" onclick="homeTransition()">
        <li>
          <i class="fa fa-home"></i> home
        </li>
      </div>
      <div class="liSeperator"></div>
      <div id="about" class="noselect" onclick="aboutTransition()">
        <li>
          <i class="fa fa-user"></i> about
        </li>
      </div>
      <div class="liSeperator"></div>
      <div id="projects" class="noselect" onclick="projectsTransition()">
        <li>
          <i class="fa fa-code"></i> projects
        </li>
      </div>
      <div class="liSeperator"></div>
      <div id="contact" class="noselect" onclick="contactTransition()">
        <li>
          <i class="fa fa-paper-plane"></i> contact
        </li>
      </div>
    </ul>
  </div>
  <div class="content animated fadeInDown">
    <div class="button">
      <div class="line first top"></div>
      <div class="line second bottom"></div>
    </div>
  </div>

【讨论】：

我实际上忘记包含所有的 javascript...抱歉

【参考方案2】：

您可以在 CSS 中添加以下内容：

 .activePage li:hover 
   border-right: 8px solid #38d8a1;
   background: black;
 

这将使您的border-right: 和background 保持相同，并且不会触发其他li 元素接收的悬停效果。

Working Fiddle - https://fiddle.jshell.net/0nw77chv/（CSS 添加在底部）