Question

当我将鼠标悬停在菜单上时，我试图在菜单中设置我的链接。然后，当鼠标离开链接（没有点击它）时，我希望当前链接返回到样式。

HTML：

<div id="header">
  <div id="title"><h1>Title<span id="Subtitle">Subtitle</span></h1></div>
      <nav class="cf" id="menu">
      <ul>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="gallery.html">GALLERY</a></li>
        <li><a href="bio.html">BIO</a></li>
        <li><a href="contact.html">CONTACT</a></li>
        <li><a href="index.html" class="current">HOME</a></li>
      </ul>
      </nav>
</div>

CSS

.current { color: #FFBB3F;}

JS

$( "nav a" ).on('mouseover', function(){

    $( "nav a.current" ).removeClass("current");
        $(this).addClass("current");
    });

$( "nav a" ).on('mouseleave', function(){
    $(this).removeClass("current");
    var pageURL = $(location).attr("href");
    $('a[href="pageURL"]').addClass("current");

});

但这不起作用。如果我发出警报

 alert(pageURL);

它为我提供了当前页面的路径，如果我只粘贴一个href

$('a[href="index.html"]').addClass("current");

它确实是链接的样式，但显然我希望对当前链接进行样式设置。我第一次尝试这个。任何帮助赞赏。感谢

Answer 1

这将添加和删除当前类以及悬停在其上的样式链接：

＆＃13;

var anchors = document.querySelectorAll("#menu a");


// Assign mouseover and mouseout event handlers to each anchor
for(var i = 0; i < anchors.length; i++){
  anchors[i].addEventListener("mouseover", styleIn);
  anchors[i].addEventListener("mouseout", styleOut);
}


// This will hold a reference to whichever anchor has the current class
var currentAnchor = null;

function determineCurrent(){
  for(var i = 0; i < anchors.length; i++){
    if(anchors[i].classList.contains("current")){
      currentAnchor = anchors[i];
    }
  }
}

function styleIn(e){
  determineCurrent();
  e.target.classList.add("hover");
  currentAnchor.classList.remove("current");
}

function styleOut(e){
  e.target.classList.remove("hover");
  currentAnchor.classList.add("current");
}

＆＃13;

a { text-decoration:none; }
.current { color: #FFBB3F; }
.hover { text-decoration:underline;}

＆＃13;

<div id="header">
  <div id="title"><h1>Title<span id="Subtitle">Subtitle</span></h1></div>
      <nav class="cf" id="menu">
      <ul>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="gallery.html">GALLERY</a></li>
        <li><a href="bio.html">BIO</a></li>
        <li><a href="contact.html">CONTACT</a></li>
        <li><a href="index.html" class="current">HOME</a></li>
      </ul>
      </nav>
</div>

＆＃13;

Answer 2

只使用CSS，规则的组合可以非常接近（可能足够接近取决于#menu的方式），请参阅CSS部分中的注释：

＆＃13;

/*
  1. Color the current one if the menu isn't being hovered
  2. Color the current link if being hovered
*/
#menu:not(:hover) .current, /* 1 */
#menu a:hover {             /* 2 */
  color: #FFBB3F;
}

＆＃13;

<div id="header">
  <div id="title"><h1>Title<span id="Subtitle">Subtitle</span></h1></div>
      <nav class="cf" id="menu">
      <ul>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="gallery.html">GALLERY</a></li>
        <li><a href="bio.html">BIO</a></li>
        <li><a href="contact.html">CONTACT</a></li>
        <li><a href="index.html" class="current">HOME</a></li>
      </ul>
      </nav>
</div>

＆＃13;

只支持CSS的版本存在以下问题：如果您没有悬停链接但是您正在徘徊#menu，则不会突出显示任何内容。我无法想到一个纯CSS的方式来处理它，所以有点JavaScript（见评论）：

＆＃13;

// Set a class on #menu only when hovering a link
$("#menu")
  .on("mouseenter", "a", function() {
    $("#menu").addClass("link-hover");
  })
  .on("mouseleave", "a", function() {
    $("#menu").removeClass("link-hover");
  });

＆＃13;

/*
  1. Color the current one if the menu doesn't have the link-hover class
  2. Color the current link if being hovered
*/
#menu:not(.link-hover) .current, /* 1 */
#menu a:hover {                  /* 2 */
  color: #FFBB3F;
}

＆＃13;

<div id="header">
  <div id="title"><h1>Title<span id="Subtitle">Subtitle</span></h1></div>
      <nav class="cf" id="menu">
      <ul>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="gallery.html">GALLERY</a></li>
        <li><a href="bio.html">BIO</a></li>
        <li><a href="contact.html">CONTACT</a></li>
        <li><a href="index.html" class="current">HOME</a></li>
      </ul>
      </nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如何选择当前页面的链接

2 个答案: