Question

我有一些导航链接，当将鼠标悬停在其上时，会在body标签上创建一个data属性，这使我可以为不同的链接添加背景颜色，这正是我想要的，但是当我将其悬停在那些链接之外时，我想要的是链接数据属性被删除或应用了一个类，这样我就可以为导航链接添加默认颜色。

这是我的html设置：

<nav>
    <a href="#">One</a>
    <a href="#">Two</a>
    <a href="#">Three</a>
</nav>

<p class="One">This is class One.</p>
<p class="Two">This is class Two.</p>
<p class="Three">This is class Three.</p>
<p class="One">This is also class One.</p>
<p class="Two">This is also class Two.</p>
<p class="Three">This is also class Three.</p>

这是将data属性设置为主体的javascript：

window.addEventListener("load",function(){

    var links = document.querySelectorAll("nav a");
    for(var i=0; i<links.length; i++){
        links[i].addEventListener("mouseover", function(){
            document.querySelector("h1").innerText = this.innerText;
            document.body.setAttribute("data-nav",this.innerText);
        });
    }
});

Answer 1

您可以将“ mouseover”事件更改为“ mouseenter”并添加“ mouseleave”事件。

“ mouseenter”事件可以将属性设置为所需的属性，而“ mouseleave”事件将删除该属性。

主要区别

This website有一些很好的例子和具体区别   在mouseover，mouseenter和mouseleave之间。以下是摘录。

鼠标悬停：鼠标移动时会触发mousemove事件。但这并不意味着每个像素都会导致一个事件。浏览器   不时检查鼠标位置。如果发现变化   然后触发事件。

鼠标输入：当鼠标输入触发时，它在元素内的位置无关紧要。

mouseleave ：mouseleave事件仅在光标离开时触发。

如果要更改悬停链接的样式，我建议使用CSS（而非JavaScript）在悬停链接本身上定义样式。如果要更改未悬停的链接的样式，您仍然可以使用类而不是data属性，但是任何一种都可以。对您的特定用例进行更多描述可以帮助我使此答案更可靠。

jsfiddle example

window.addEventListener("load",function(){
    var links = document.querySelectorAll("nav a");
    for(var i=0; i<links.length; i++){
        links[i].addEventListener("mouseenter", function(){
            document.querySelector("h1").innerText = this.innerText;
            document.body.setAttribute("data-nav",this.innerText);
        });
        links[i].addEventListener("mouseleave", function(){
            document.body.setAttribute("data-nav", '');
        });
    }
});

Answer 2

mouseover的反义词是mouseout。下例演示了如何使用data-nav作为参数来实现主体中元素的样式。

我添加了第二个javascript函数，将mouseout事件添加到每个nav a元素，只需将mouseover切换为mouseout。我已经清除了data-nav属性，因此CSS样式不再适用。

通过属性设置CSS样式可以使用element[attribute="value"]完成，在您的情况下为body[data-nav="Red"]

使用类更合适，但是下面的代码有效。

window.addEventListener("load",function(){

    var links = document.querySelectorAll("nav a");
    for(var i=0; i<links.length; i++){
        links[i].addEventListener("mouseover", function(){
            document.querySelector("h1").innerText = this.innerText;
            document.body.setAttribute("data-nav",this.innerText);
        });
        
        links[i].addEventListener("mouseout", function(){
            document.querySelector("h1").innerText = "No color selected";
            document.body.setAttribute("data-nav","");
        });
    }
});

body p {
  color: black;
}

body[data-nav="Red"] p {
  color: red;
}
  
body[data-nav="Blue"] p {
  color: blue;
}
  
body[data-nav="Green"] p {
  color: green;
}

<nav>

    <a href="#">Red</a>
    <a href="#">Blue</a>
    <a href="#">Green</a>

</nav>

<body>

    <h1>No color selected</h1>
   
    <p class="One">This is class One.</p>
    <p class="Two">This is class Two.</p>
    <p class="Three">This is class Three.</p>
    <p class="One">This is also class One.</p>
    <p class="Two">This is also class Two.</p>
    <p class="Three">This is also class Three.</p>

</body>

Answer 3

一些最佳做法：

不要为每个元素添加侦听器。取而代之的是，为元素的某些父级添加一个全局侦听器或添加一个侦听器。
使用类名选择器代替标记名选择器（// Because IIS automatically captures the user login, by the time the app is touched // in any request, the context (ctx) User is already present. app.Use(async (ctx, next) => { if (ctx.User?.Identity?.IsAuthenticated == true) { NgUser opPrincipal = CustomStaticMethod.GetUserAD(); ctx.User = opPrincipal; } // be sure to continue the rest of the pipeline! await next.Invoke(); });代替.h1）

我的示例：

h1

/** Helper for toggle classNames of body. */
function toggleHoverClass (className) {
  // Remove all hover-classes.
  document.body.classList.remove('hover-1', 'hover-2', 'hover-3');
  // Add new hover-class.
  document.body.classList.add(className);
}

window.addEventListener("load",function(){
  var elNav = document.getElementById('nav');
  var elH1 = document.getElementById('h1');
  var defaultH1Value = elH1.innerText;

  // One mouseover handler
  elNav.addEventListener("mouseover", function (event) {
    // If it is link with data-type
    if (event.target.dataset && event.target.dataset.type) {
      elH1.innerText = event.target.innerText;
      // Add hover class
      toggleHoverClass('hover-' + event.target.dataset.type);
    }
  });

  // One mouseout handler
  elNav.addEventListener("mouseout", function (event) {
    // If it is link with data-type
    if (event.target.dataset && event.target.dataset.type) {
      elH1.innerText = defaultH1Value;
      // Remove hover class
      document.body.classList.remove('hover-' + event.target.dataset.type);
    }
  });
});

body.hover-1 .One,
body.hover-2 .Two,
body.hover-3 .Three{
  color: red;
}

删除mouseleave上的数据属性

3 个答案: