Question

heyy，

我想在jquery中鼠标悬停时创建一些悬停背景链接!!!

当鼠标悬停在“.nav菜单nav a”上时，我添加addclass“.hover”，当鼠标移出removeClass“.hover”

关于我小提琴的更多信息 - ＆gt; demo JS FIDDLE

HTML：＆GT; ＆GT;

            <a href="inc/about/" class="Load frame" id="html" data-html="about">
             <div class="hover"></div> about
            </a>

            <a href="inc/porject/" class="Load frame" id="html" data-html="project">
              <div class="hover"></div> project
            </a>

            <a href="inc/story/" class="Load frame" id="html" data-html="story">
             <div class="hover"></div> story
            </a>

            <a href="inc/contact/" class="Load frame" id="html" data-html="contact">
              <div class="hover"></div> contact
            </a>

CSS：

.navMenu nav {

      width: 100%; height: auto;
      list-style-type: none; margin: auto auto;
      text-align: center;

    }


.navMenu a {

      height: 4em; width: 100%; 
      text-decoration: none; text-transform: uppercase;
      text-align: center; display: block;
      line-height: 4em; font-weight: normal;
      font-size: 1em; color: rgba(238,79,87,1); 
      position: relative; z-index: 100;

}

.hover{

    /* add background, width, height, ect... */

}

JS：

function hoverLi（）{

        $(".navMenu a").hover(function(){

          $(this).stop(true, true).addClass("hover");

        },function(){

          $(this).removeClass("hover");


        });


      }

非常感谢

Answer 1

这是JSFiddle

http://jsfiddle.net/t6d4hvkg/4/

使用css选择器:hover

它是一个假类

更新你的CSS：

.navMenu nav {

  width: 100%; height: auto;
  list-style-type: none; margin: auto auto;
  text-align: center;

}


.navMenu a {

  height: 4em; width: 100%; 
  text-decoration: none; text-transform: uppercase;
  text-align: center; display: block;
  line-height: 4em; font-weight: normal;
  font-size: 1em; color: rgba(238,79,87,1); 
  position: relative; z-index: 100;

}

.navMenu nav:hover{

background:#000000;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
color:white;

}

Answer 2

如果你坚持使用jQuery，那么你只需要删除你的功能并留下这部分：

$(".navMenu nav a").hover(function(){
    $(this).addClass("hover");
},function(){
    $(this).removeClass("hover");
});

查看此DEMO ..

Answer 3

我猜您需要为您的悬停类添加背景颜色，如下所示：

.hover{
  background-color:#eee;

}

然后调用document.ready function，将HoverLi函数传递给它。

想在jquery中创建悬停链接菜单

3 个答案: