Welcome Guest   ·   Login   ·   Register   ·   Member List
Forum Home  >  CSS help  >  Help with CSS  >  Thread
Search  
  
  Advanced Search
   
 
Mousoever for a div instead of <a href>
 
tlflow
Posted: 06 February 2009 10:16 PM   [ Ignore ]
Newbie
Rank
Total Posts:  6
Joined  2008-03-20

The way my website is layed out, I want a user to be able to mouseover a section (say 200(width) x 100(height) of content with the background image changing on mouseover and mouseout (think coupon on the side of a article instead of just a link).  Thing is, I want to put a div or span inside of it so using <a > won’t work because putting a div inside of an <a > goes against W3C rules (besides ever so often it’ll break).

I’m thinking javascript is the only way to go, am I wrong?  Any ideas how to do this w/ or w/o javascript?

Profile
 
 
vishwebdesign
Posted: 05 March 2009 07:21 PM   [ Ignore ]   [ # 1 ]
Member
Avatar
RankRankRank
Total Posts:  52
Joined  2007-11-08

Javascript is best suited for this problem.

Profile
 
 
sandblocks
Posted: 07 March 2009 07:33 AM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  6
Joined  2009-03-07

You can try something like this:


My Text


a.myBlockLink, a.myBlockLink:link, a.myBlockLink:visited
{
display: block;
overflow: hidden;
width: 200px;
height: 100px;
text-indent: -1000px;
background-image: url(/my/images/image_200x100.jpg);
}

a.myBlockLink:hover
{
background-image: url(/my/images/image_200x100_hover.jpg);
}

Profile
 
 
svampola
Posted: 11 March 2009 12:25 PM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  17
Joined  2009-03-09

Or..
You can try something like this:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Try this</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>

<style>
/* this one is internal, but you can use external style */
#box {
width:200px;
height:200px;
background-color: #fafafa;
border: solid 1px #a5a5a5;
float:left;
}

#box:hover {
background-color:#cacaca;
background-image:url(http://www.faktor.rs/images/sierra/bojanka.gif);
/*of course you can put here background-image like the one in upper line */
float:left;
overflow:hidden;
}
a img {
border: none; } /* You need this to disable violet border around a image link */

</style>
</head>

<body>
<div id=“box”>
<a href=“http://www.faktor.rs”><img src=“http://www.faktor.rs/images/sierra/link.gif” ></a>
</div>
<!—what I did here is to make an 200x200px transparent gif and called it link.gif —>

</body>
</html>

Profile
 
 
littlechris1977
Posted: 14 April 2009 01:22 PM   [ Ignore ]   [ # 4 ]
Newbie
Rank
Total Posts:  14
Joined  2008-02-04

Using the :hover state will work in all browsers but IE6…won’t support it. There is a Jquery hover script that may work…real simple just change name of div inside the call…Here’s the code.

$(function() {
  $(”#DIV TO CHANGE”).hover(function() {
  $(this).attr(“background-image”, $(this).attr(“src”).split(”.”).join(”-hover.”));
  }, function() {
  $(this).attr(“background-image”, $(this).attr(“src”).split(”-NAME OF HOVER GRAPHIC EXTENSION.”).join(”.”));
  });
});


So you have bg image and bg image-hover

Profile
 
 
   
 
 
‹‹ External CSS not loading      Newbie problem with font-size in body ››