Question

文件名是index.js

$(document).ready(function() {
    $("div").hover(function(){
        $(this).toggleClass("multi")
    }
}

文件名是stylesheet.css

    a{
text-decoration:none;
color:green;
}
a:hover{
text-decoration:none;
color:blue;
}
a:visited{
text-decoration:none;
color:green;
background-color:red;
}
div{
font-family:Garamond;
border:3px solid blue;
width:75px;
height:45px;
margin:3px;
a:nth-child(5) div{
border-color:red;
}
.multi{
border-image: -webkit-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%;
border-image: -ms-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%;
border-image: -moz-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%;
width:120px
}

文件名是index.html

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='index.js'></script>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<a href="http://www.criticalsoftware.com/en/homepage"><img src="http://tse3.mm.bing.net/th?id=OIP.M6306c8d673012b728da1d23d43adbcdfo0&w=134&h=135&c=7&rs=1&qlt=90&o=4&pid=1.1"/></a>
</head>
<body>
<a href="day1.html"><div><h1>day 1</h1></div></a>
<a href="day2.html"><div><h1>day 2</h1></div></a>
<a href="day3.html"><div><h1>day 3</h1></div></a>
<a href="day4.html"><div><h1>day 4</h1></div></a>
<a href="finalday.html"class=""><div><h1>final day</h1></div></a>

jQuery对结果页面没有影响。我已经包含了所有可能影响div的CSS。任何帮助将不胜感激。

Answer 1

在关闭document.read y和.hover()事件附近有语法错误：

在css中你还需要检查所有结束括号：

＆＃13;

$(document).ready(function() {
    $("div").hover(function(){
        $(this).toggleClass("multi");
     }); // close braces like this
}); // close braces like this

＆＃13;

a{
text-decoration:none;
color:green;
}
a:hover{
text-decoration:none;
color:blue;
}
a:visited{
text-decoration:none;
color:green;
background-color:red;
}
div{
font-family:Garamond;
border:3px solid blue;
width:120px;
height:45px;
margin:3px;
  } /* Add here closing bracket*/
h1{
margin:0px;
}
a:nth-child(5) div{
border-color:red;
}
.multi{
border-image: -webkit-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%;
border-image: -ms-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%;
border-image: -moz-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%;
width:200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<a href="day1.html"><div><h1>day 1</h1></div></a>
<a href="day2.html"><div><h1>day 2</h1></div></a>
<a href="day3.html"><div><h1>day 3</h1></div></a>
<a href="day4.html"><div><h1>day 4</h1></div></a>
<a href="finalday.html"class=""><div><h1>final day</h1></div></a>

＆＃13;

Answer 2

试试这个！

＆＃13;

$(document).ready(function() {    
    $("div").hover(function (){
        $(this).addClass("multi");
    }, function (){     
        $(this).removeClass("multi");   
    });
});

＆＃13;

a{
  text-decoration:none;
  color:green;
}
a:hover{
  text-decoration:none;
  color:blue;
}
a:visited{
  text-decoration:none;
  color:green;
  background-color:red;
}
div{
  font-family:Garamond;
  border:3px solid blue;
  width:120px;
  height:45px;
  margin:3px;
}
h1{
  margin:0px;
}
a:nth-child(5) div{
  border-color:red;
}
.multi{
  border-image: -webkit-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%;
  border-image: -ms-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%;
  border-image: -moz-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%;
  width:200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<a href="day1.html"><div><h1>day 1</h1></div></a>
<a href="day2.html"><div><h1>day 2</h1></div></a>
<a href="day3.html"><div><h1>day 3</h1></div></a>
<a href="day4.html"><div><h1>day 4</h1></div></a>
<a href="finalday.html"class=""><div><h1>final day</h1></div></a>

＆＃13;

jQuery .toggleClass无效

2 个答案: