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>

jQuery

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

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