私はまだスパンホバーの背景画像を変更するといくつかの助けが好きです。誰かがそれを手伝ってくれたら。私は下のウェブサイトの完全なコードを提供しました。CSS背景上にホバー
ここにウェブサイトのフルコードがあります。
私はまだスパンホバーの背景画像を変更するといくつかの助けが好きです。誰かがそれを手伝ってくれたら。私は下のウェブサイトの完全なコードを提供しました。CSS背景上にホバー
ここにウェブサイトのフルコードがあります。
jqueryの.hover();
と.css();
または.hover();
と.addClass();
と.removeClass();
を見てみましょう。 これはあなたが探しているものを正確に与えるはずです。 .animate();
に投げ込んで、あまりにも残念なトランジションにすることもできます。ここで
が小さい例である:
のjQuery:
$(function(){
$('.text1').hover(function(){
$('body').css('background-color', 'blue');
});
});
'何-あなた-want.js' という名前のファイルの中にこのコードを入れて、あなたのhtmlの上にそれを含めます<head>
セクションで、<script src="anything-you-want.js">
タグを使用して、作成した新しいjsファイルにリンクします。また、例のように.css();
を使用している場合は、あなたの体にあなたのCSSの中にbackground-color
を付けるようにしてください。そうしないと動作しません。また、anything-you-want.jsファイルの場合と同様に、htmlの<head>
タグの中にJQueryライブラリをリンクするようにしてください。あなたはonmouseover属性、チェックアウトを純粋なJSを使用している場合(追加アニメーション)
$(function(){
$('.text1').hover(function() {
$('body').stop().animate({
backgroundColor:'rgb(255, 60, 0)'
}, 300);
}, function() {
$('body').stop().animate({
backgroundColor:'rgb(134, 33, 0)'
}, 100);
});
});
:ここ は、それへのリンク..です Jquery Library
EDIT。あなたはこれをW3 siteで読むことができます。
In HTML:
<element onmouseover="myScript">
In JavaScript:
object.onmouseover=function(){myScript};
In JavaScript, using the addEventListener() method:
object.addEventListener("mouseover", myScript);
これはJQueryまたはJavascriptを使用する最もよい方法です。
<html>
<head>
<style type = "text/css">
body
{
background: url(http://www.programmingfacts.com/wp-content/uploads/2015/01/change-parent-bg-color-hover-child.jpg) no-repeat fixed;
}
h1: hover
{
background: url(back6.jpg) no-repeat center center fixed;
}
.hover
{
background-image: url('http://s5.postimg.org/8jj7nydhz/Background_main.jpg');
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').hover(function() {
$('body').addClass('hover');
}, function(){
$('body').removeClass('hover');
});
});
</script>
</head>
<body>
<h1>
Future Text.<br>
<span class="text1">Text1</span>, <span class="text2">Text2</span>, <span class="text3">Text3</span>, <span class="text4">Text4</span>.
</h1>
</body>
</html>
.test{
background-image: url("https://www.planwallpaper.com/static/images/background-wallpapers-32_NRz0mTd.jpg");
}
<div class="test">
<form action="search.php" method="GET">
<input type="text" name="query" />
<input type="submit" value="Search" />
</form>
</div>
}
enter code here
私は私のCSSのbody要素に選択私の主な背景を持っています。しかし、このJQUERYは、それを上書きしないのですか? – LeEclipse
これはあなたのcssに同じ色を持っているか、またはあなたのhtmlの '
'が正しくリンクしていないというスクリプトリンクの1つを意味する必要があります。スクリプトのリンクを再度確認してください。必要に応じて、質問を編集してコードを投稿して、正確に何が起こっているかを確認できます。 –そして、どのように.fadeIn()を追加しますか? JS – LeEclipse