0

div にヘッダー画像があり、ヘッダー div の下にいくつかのコンテンツがある別の div があります。コンテンツ div をホバーすると、ヘッダー画像が別の画像に変化し、何らかの効果が得られます。これは css 自体で実行できますか、それとも jquery が必要ですか?..ありがとうございます。

4

3 に答える 3

1

変更中に効果が必要な場合は、javascript または jquery が必要です。

ここでは、animate() で簡単な画像変更関数を作成しました。

CSS

  #header{ background:url(http://blogs-images.forbes.com/daviddisalvo/files/2012/01/googlelogo2.jpg) no-repeat; width:700px; height:400px;}

HTML

 <div id="header"></div>
 <div id="content">Blah Blah Blah</div>

Jクエリ

 $(document).ready(function(){
 $('#content').mouseover(function(){
 $('#header').animate({ opacity:1});
 $('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
 $('#header').animate({ opacity:0.1});
 });
 $('#content').mouseleave(function(){
 $('#header').animate({ opacity:0.1});
 $('#header').css('background','url(http://blogs-images.forbes.com/daviddisalvo/files/2012/01/googlelogo2.jpg) no-repeat')
 $('#header').animate({ opacity:1});
});

 });

ここで出力を確認できます

于 2012-12-11T05:29:20.303 に答える
0 
<html>
<head>
<style type="text/css">
.logo-img{
     background-color:green;
}
.logo-img:hover{
     opacity:0.5;
     background-color:red;
}
</style>
<body>
<img src="/img/logo.png" class="logo-img">
</body>
</html>
于 2012-12-11T06:53:17.017 に答える
0

CSS は別の要素で :hover クラスを使用することを許可しないため、これを行うには JavaScript が必要です。

このフィドルをチェックアニメーションなし

このフィドルをアニメーションで確認する

Javascript

$('#content').hover(function() {
    $('.hover-image').fadeIn('slow');
},
function() {
    $('.hover-image').fadeOut('slow');
})

HTML

<div id="header">
    <img src="http://media.smashingmagazine.com/images/header-contest/full/avto.jpg" />
    <img class="hover-image" src="http://mitosoc.org/blogs/wp-content/themes/Cutline2pt1/images/header.jpg">
</div>
<div id="content">Lorem ipsum viverra tortor donec nulla torquent porttitor diam praesent viverra, curae felis semper ad ultricies vitae placerat convallis sagittis felis, quisque etiam dui in primis sit curabitur porttitor ornare velit fames aptent lobortis accumsan torquent quam libero fames, porttitor etiam netus suspendisse sagittis potenti.</div>

CSS

#header { overflow:hidden; width:850px; height:200px; position:relative; }
.hover-image { display:none; position:absolute; z-index:1; top:0; left:0; }
于 2012-12-11T05:30:07.900 に答える