2016-03-25 13 views
0

私はまだスパンホバーの背景画像を変更するといくつかの助けが好きです。誰かがそれを手伝ってくれたら。私は下のウェブサイトの完全なコードを提供しました。CSS背景上にホバー

ここにウェブサイトのフルコードがあります。

Pastebin CSS

Pastebin JavaScript

答えて

2

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

}); 
+0

私は私のCSSのbody要素に選択私の主な背景を持っています。しかし、このJQUERYは、それを上書きしないのですか? – LeEclipse

+0

これはあなたのcssに同じ色を持っているか、またはあなたのhtmlの ''が正しくリンクしていないというスクリプトリンクの1つを意味する必要があります。スクリプトのリンクを再度確認してください。必要に応じて、質問を編集してコードを投稿して、正確に何が起こっているかを確認できます。 –

+0

そして、どのように.fadeIn()を追加しますか? JS – LeEclipse

1

:ここ は、それへのリンク..です 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); 
0

これは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> 
0

.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 
関連する問題