change image of header with effects when i hover on another div
Question
I have header image in a div and another div with some content below the header div. when ever I hover the content div the header image should change to another image with some effect. Is this can be done with css itself or jquery is needed?..Thank You.
3 answers
solution1
1 2012-12-11 05:29:20
If You need effects while changing we need javascript or jquery for it.
Here i made a simple image change function on 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});
});
});
You can check the output here
solution2
0 2012-12-11 05:30:07
CSS won't allow to use the :hover class on another element so you need JavaScript to do this.
Check this fiddle No animation
Check this fiddle with animation
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; }
solution3
0 2012-12-11 06:53:17
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.