-1

嘿嘿，

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

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

有关我的小提琴的更多信息->演示 JS FIDDLE

HTML : > >

            <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：

函数悬停李（）{

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

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

        },function(){

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


        });


      }

多谢

4

3 回答 3

0

万一你坚持使用 jQuery，那么你只需要删除你的函数并只留下这部分：

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

看看这个演示..

于 2014-08-21T09:28:59.730 回答
0

这是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;

}
于 2014-08-21T09:25:58.297 回答
0

我想你需要像这样为悬停类添加背景颜色：

.hover{
  background-color:#eee;

}

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

于 2014-08-21T09:34:22.013 回答