Kie21 Kie21 - 2 months ago 8
HTML Question

Hover image effect

I have a title bar the top of my page which is colored red. I have two links in the page for Facebook and Twitter. When I roll my mouse over the image the background turns white to indicated that it has been highlighted. Included in the link is an image of the Facebook and Twitter symbols which both have white backgrounds. The background color of the icons is white which obviously makes the background white on the webpage.

I have tried changing the background to red but the when the link is hovered over it stays red. I have tried a rollover image but when I hover over the link the effect iv given it is to gradually change color from red to which and the roll over image instantly snaps to the new image. Is there a way to make the image slowly change in sync with the hover change?

This is my HTML for the social media links:

<div class="SocialMedia">
<ul>
<li><img src="../Images/facebook.png" width="20" height="20"><a href="https://www.facebook.com/tokyo.corner.3?fref=ts" target="_blank"> Facebook </a></li>
<li><img src="../Images/Twitter.jpg" width="20" height="20"><a href="https://twitter.com/TokyoCorner" target="_blank"> Twitter </a></li>
</ul>
</div><!--Social Media-->


This is my CSS

#Wrapper .TitleBar .SocialMedia {
position: absolute;
left: 445px;
top: -3px;
height: 51px;
width: 896px;
}

#Wrapper .TitleBar .SocialMedia ul{
list-style-type:none;
}

#Wrapper .TitleBar .SocialMedia ul li {
display:inline;
padding:10px;
margin:0px;
float:right;
}
#Wrapper .TitleBar .SocialMedia ul li a {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;
height:50px;
width:208px;
text-shadow:1px 1px 1px #000;
}
#Wrapper .TitleBar .SocialMedia ul li:hover {
background:#FFF;
color:#000000;
-webkit-transition:all 0.3s linear;
}
#Wrapper .TitleBar .SocialMedia ul li:hover a {
color:#000000;
text-shadow:1px 1px 1px #000;

}
#Wrapper .TitleBar .SocialMedia ul li a:hover {
color:#000;
text-shadow:1px 1px 1px #000;
}
#Wrapper .TitleBar .SocialMedia ul:hover {
color:#000;
}

Answer

I am sorry but i couldn't get your question properly but i think you can do this by using jquery:-

<img src="../Images/facebook.png" width="20" height="20" id="fb">
<img src="../Images/Twitter.jpg" width="20" height="20" id="tw">

and in jquery:-

$(document).ready(function() {
$('#fb').hover(function(){

$('#Wrapper').css('background-color','whatever u want to');
},
function(){
$('#wrapper').css('background-color','to original color');
});
});

similarly for twitter.

Do not forget to include the jquery file:-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>