如何使用javascript / jquery悬停效果？

时间：2015-03-21 01:55:47

标签： javascript jquery html css

所以我对JS和jQuery稍微有点新意，但我非常了解html和css。我想知道这是否可行。

我在信息区域中有一些导航的HTML代码。我把它全部设置好了，所以它在鼠标悬停时调用了一个函数，这个函数将链接的颜色变为白色。对于mouseout，它再次变黑。现在我知道你可以用css做这个，但我需要Js / jQuery的练习。我写了一些代码并且它可以工作，但是它会将所有颜色的颜色变为白色并且混合在一起，测试代码，你会看到。有没有办法只选择所选按钮并仅为该颜色着色。也许有阵列或什么？我真的不需要知道是否有办法用css来做，我只需要养成使用js / jQuery的习惯。

代码：

＆＃13;
＆＃13; 
function colorLink() {
  $(".infoNav nav ul li a").css("color", "white");
}

function colorLinkOut() {
  $(".infoNav nav ul li a").css("color", "black");
}
＆＃13; 
* {


  margin: 0px;


  padding: 0px;


}


.header-wrap {


  position: fixed;


}


.fixed {


  position: fixed;


  top: 0;


  left: 0;


  width: 100%;


  background-color: transparent;


}


body {


  background: #CCC;


  width: 70%;


  margin-left: 20%;


  margin-top: 0px;


  height: 900px;


}


.mainHeader {


  padding: 0;


  background: #666;


  height: 36px;


  width: 100%;


  border-radius: 5px;


  position: relative;


  top: 150px;


  left: -70px;


  box-shadow: 10px 10px 10px #767373;


}


.mainHeader nav ul li {


  display: inline-block;


  list-style: none;


  margin: 10px 0px 0px -30px;


  margin-left: 15px;


  position: relative;


  top: -128px;


  left: 10px;


}


.mainHeader nav ul li a {


  text-decoration: none;


  border-radius: 3px;


  color: white;


  padding: 7px 20px 10px 20px;


  margin-right: -15px;


  font-family: 'Eras ITC';


}


.mainHeader nav ul li a:hover {


  background: #f18529;


}


.mainHeader nav ul .active {


  background: #f18529;


}


.mainInfo {


  background: white;


  height: 500px;


  width: 100%;


  position: relative;


  top: 200px;


  left: -70px;


  border-radius: 5px;


  box-shadow: 10px 10px 10px #727272;


}


.mainInfo .miInfo p {


  font-family: Arial;


  padding: 10px 10px 10px 10px;


  text-align: left;


}


.mainHeader .logoArea p {


  position: relative;


  top: -100px;


}


.mainHeader .logoArea img {


  position: relative;


  top: -130px;


  left: 130px;


}


.infoNav nav ul li {


  list-style: none;


  border: 2px solid black;


  padding: 30px;


  border-radius: 20px;


  width: 140px;


  text-align: center;


  margin-top: 30px;


  position: relative;


  left: 35%;


}


.infoNav nav ul li:hover {


  background: #f18529;


  color: white;


}


.infoNav nav ul li a {


  text-decoration: none;


  color: black;


  font-family: Broadway;


  font-size: 30px;


}


@media only screen and (min-width: 150px) and (max-width: 600px) {


  body {


    width: 100%;


  }


  .mainHeader {


    padding: 0;


    background: #666;


    height: 70px;


    width: 80%;


    border-radius: 5px;


    position: relative;


    top: 150px;


    left: -70px;


    list-style-type: none;


  }


  .mainHeader nav ul li {


    text-align: center;


    height: 100%;


    word-break: break-all;


  }


  .mainHeader nav ul li a {


    width: 100%;


    height: 20px;


    padding: 10px 5px;


    display: inline-block;


    margin: 10px;


  }


  .mainInfo {


    background: white;


    height: 300px;


    width: 80%;


    position: relative;


    top: 200px;


    left: -70px;


    border-radius: 5px;


    box-shadow: 10px 10px 10px #727272;


  }


  .mainInfo .miInfo {}


}
＆＃13; 
<!DOCTYPE html>

<html lang="en">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="Script.js"></script>

  <link rel="stylesheet" type="text/css" href="StyleSheet.css">

  <meta charset="utf-8" />

  <title>Website</title>
</head>

<body class="body">
  <header class="mainHeader">
    <div class="logoArea">
      <img alt="logo" src="logo.jpg" width="250px" height="120px">
    </div>
    <nav>
      <ul>
        <li><a class="active" href="Index.html">Home<br/></a>
        </li>
        <li><a href="About.html">About<br/></a>
        </li>
        <li><a href="Random.html">Random</a>
        </li>
      </ul>
    </nav>
  </header>
  </div>
  <div class="mainInfo">
    <div class="miInfo">
      <p>Please choose one of the catagories below:)</p>
      <div class="infoNav">
        <nav>
          <ul>
            <li onmouseover="colorLink()" onmouseout="colorLinkOut()"><a href="Index.html">Home<br/></a>
            </li>
            <li onmouseover="colorLink()" onmouseout="colorLinkOut()"><a href="About.html">About<br/></a>
            </li>
            <li onmouseover="colorLink()" onmouseout="colorLinkOut()"><a href="Random.html">Random</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

使用悬停

function colorLink(){
  $(this).find("a").css("color", "red");
}

function colorLinkOut(){
  $(this).find("a").css("color", "green");
}

$('.infoNav nav li').hover(colorLink, colorLinkOut);
    *{margin: 0px;
    padding: 0px;}
.header-wrap{
    position: fixed;
}

.fixed{
    position: fixed;
    top: 0;
    left:  0;
    width: 100%;
    background-color: transparent;
}
body{
    background:#CCC;
    width: 70%;
    margin-left: 20%;
    margin-top: 0px;
    height: 900px;
}

.mainHeader{
    padding: 0;
    background:#666;
    height:36px;
    width:100%;
    border-radius: 5px;
    position: relative;
    top: 150px;
    left: -70px;
    box-shadow: 10px 10px 10px #767373;
}

.mainHeader nav ul li{
    display:inline-block;
    list-style:none;
    margin: 10px 0px 0px -30px;
    margin-left: 15px;
    position: relative;
    top:  -128px;
    left: 10px;
}

.mainHeader nav ul li a{
    text-decoration: none;
    border-radius: 3px;
    color: white;
    padding: 7px 20px 10px 20px;
    margin-right: -15px;
    font-family: 'Eras ITC';
}

.mainHeader nav ul li a:hover{
    background: #f18529;
}

.mainHeader nav ul .active {
    background: #f18529;
}

.mainInfo{
    background:white;
    height: 500px;
    width: 100%;
    position: relative;
    top: 200px;
    left: -70px;
    border-radius: 5px;
    box-shadow: 10px 10px 10px #727272 ;
}

.mainInfo .miInfo p{
    font-family: Arial;
    padding:  10px 10px 10px 10px;
    text-align: left;
}

.mainHeader .logoArea p{
    position: relative;
    top: -100px;

}

.mainHeader .logoArea img{
    position: relative;
    top: -130px;
    left: 130px;

}

.infoNav nav ul li{
    list-style: none;
    border: 2px solid black;
    padding: 30px;
    border-radius: 20px;
    width: 140px;
    text-align: center;
    margin-top: 30px;
    position: relative;
    left: 35%;
}

.infoNav nav ul li:hover{
    background: #f18529;
    color: white;

}


.infoNav nav ul li a{
    text-decoration: none;
    color: black;
    font-family: Broadway;
    font-size:30px;
}

@media only screen and (min-width: 150px) and (max-width: 600px) {
    body{
    width: 100%;
}

    .mainHeader{
        padding: 0;
        background:#666;
        height:70px;
        width:80%;
        border-radius: 5px;
        position: relative;
        top: 150px;
        left: -70px;
        list-style-type: none;
    }

    .mainHeader nav ul li{
        text-align: center;
        height: 100%;
        word-break: break-all; 

}

 .mainHeader nav ul li a{
        width: 100%;
        height: 20px;
        padding:  10px 5px;
        display: inline-block;
        margin: 10px;

}
 .mainInfo{
    background:white;
    height: 300px;
    width:80%;
    position: relative;
    top: 200px;
    left: -70px;
    border-radius: 5px;
    box-shadow: 10px 10px 10px #727272;


}

.mainInfo .miInfo{

}


}  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="body">
    <header class="mainHeader">
       <div class="logoArea">
            <img alt="logo" src="logo.jpg" width="250px" height="120px">
        </div>
        <nav><ul>
            <li><a class="active" href="Index.html">Home<br/></a></li>
            <li><a href="About.html">About<br/></a></li>
            <li><a href="Random.html">Random</a></li>
        </ul></nav>
    </header>
    </div>
    <div class="mainInfo">
        <div class="miInfo">
            <p>Please choose one of the catagories below:)</p>
            <div class="infoNav">
                <nav><ul>
                    <li><a href="Index.html">Home<br/></a></li>
                    <li><a href="About.html">About<br/></a></li>
                    <li><a href="Random.html">Random</a></li>
                </ul></nav>
            </div>
        </div>
    </div>

</body>

答案 1 :(得分：0)

是的，有一种方法，但是如果你使用jQuery，你最好以jQuery方式连接到事件，所以从html中删除那些onmouseover="colorLink()"和onmouseout="colorLinkOut()"并替换你的javascript for 

$(function(){
    $(".infoNav li").mouseover(function(){
        $(this).find("a").css("color", "white");
    });

    $(".infoNav li").mouseout(function(){
        $(this).find("a").css("color", "black");
    });
});

通过挂钩jQuery而不是普通的javascript，你现在可以使用＆＃34;这个＆＃34;关键字作为对生成事件的元素的引用，这就是为什么$（this）在这里工作，但不能使用以前的代码。

http://jsfiddle.net/mtd4ouj3/3/

相关问题
最新问题