jQueryの.toggleClass</p> <pre><code>$(document).ready(function() { $("div").hover(function(){ $(this).toggleClass("multi") } } </code></pre> <p>index.js

-2

ファイル名をされた作業ファイル名が

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にjQueryのある

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

あるstylesheet.cssありません結果のページに影響を与えません。私はdivに影響を与える可能性があるすべてのCSSを含めました。どんな助けでも大歓迎です。

出典

2016-07-14 Ben Hemmings

あなたは、問題を再現JSFiddleを作ることはできますか？ –

あなたのCSSとJSにいくつかの構文エラーがあります。カッコとカッコがありません。これらを修正すると、https://jsfiddle.net/RoryMcCrossan/4nnntp35/が表示されます。また、これを達成するために '：hover' CSSセレクタを使うことができるので、JSはここでは必要ないことに注意してください。 –

HTMLにjQueryを含めましたか？ – str

これで試してみてください！

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

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; 
 
}

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

出典

2016-07-14 12:49:52 therealbischero

あなたがdocument.read Yと.hover()イベント終了近くで構文エラーがあります：CSSで

をもすべて閉じ括弧をチェックする必要があります。

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

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; 
 
}

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

出典

2016-07-14 11:48:02

あなたは 'hover（）'関数でこれを見逃しました.CSSにも問題があります。 –

@RoryMcCrossanはい閉じ括弧もCSSで欠落していた –

jQueryの.toggleClass</p> <pre><code>$(document).ready(function() { $("div").hover(function(){ $(this).toggleClass("multi") } } </code></pre> <p>index.js

答えて

関連する問題