By bensquare on

Dear all,

I see this web and the teaser will get high-lighted the whole teaser box if u hover over it

http://www.lfpress.com/events/

I wonder how can u make this effect ?

Many thanks for your advice

Ben

⋅ Categories: Drupal 6.x

Comments

v8powerage’s picture

v8powerage commented

There are two things:

-the change of color of the box is made in css
-assigning entire box hover is done in javascript (jquery)

css (yourtheme/style.css):

.node{
  background-color:#fff;
}

.node:hover {
  background-color:#ccc;
}

js put it before the </head> in: (yourtheme/page.tpl.php):

<script type="text/javascript">
$(document).ready(function(){

	$(".node").click(function(){
	  window.location=$(this).find("a").attr("href"); return false;
	});

});
</script>

This is example with .node class, but you can replace this with anything.

granttoth’s picture

granttoth commented

Try this too

.node:hover {
background-color:#ccc;
cursor:pointer;
cursor:hand
}

bensquare’s picture

bensquare commented

@shaman & granttoth

Many thanks for the advice from both of you ^_^. It works perfectly.

I do a small amendment so that the hover effect only appears in teaser (but not in the full node)

.node.teaser:hover {
background-color:#ccc;
cursor:pointer;
cursor:hand
}

& in the script

$(document).ready(function(){ $(".node.teaser").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); });

Once again, thx for the help from both of you. much appreciated

Ben