http://www.socreative.tv/

 

just like how its done here ive seen many of the users hear use the techqiue.

 

whats the html and css?

bump

Only having a quick stab because i'm supposed to be working but... i'm assuming it's set to block and then the background is changed on :hover... just a quick guess with out seeing the site.

1. give div a class

2. make the background change on the hover

 

??? would this work then?

Yep here's the most basic thing i can knock up in Notepad to demonstrate...

 

CSS

ul {
list-style-type: none;
}
li {
background-color: #09F;
width: 100px;
height: 40px;
padding-left: 10px;
}
li:hover {
background-color: #0F3;
width: 100px;
height: 40px;
padding-left: 10px;
}

 

HTML

<ul>
   <li>Test 1</li>
   <li>Test 2</li>
   <li>Test 3</li>
   <li>Test 4</li>
</ul>

Edited December 16, 201015 yr by MikeChipshop

The above won't work in IE (not sure about 8/9), and perhaps other browsers.

You could use jQuery which would work in all browsers with Javascript enabled:

 

$(document).ready(function(){
   $("li.hoverable").hover(function(){ $(this).addClass("hovered"); });
   $("li.hoverable").mouseleave(function(){ $(this).removeClass("hovered"); });
});

 

HTML:

<ul>
   <li class="hoverable">Some text here, when hovered this changes to .hoverable.hovered in your CSS definitions</li>
   <li class="hoverable">Some text here, when hovered this changes to .hoverable.hovered in your CSS definitions</li>
   <li class="hoverable">Some text here, when hovered this changes to .hoverable.hovered in your CSS definitions</li>
</ul>

 

CSS:

li.hoverable{
   background:#fff;
   padding:8px;
}
li.hoverable.hovered{
   background:#e9ff82;
}

 

Longer, but more compatible. I'm guilty of using the quick way Mike posted

 

Edit: Of course, this isn't limited to <li> - you can just switch the word 'li' in the scripts to whatever you want, or remove it entirely to make it global.

Edited December 16, 201015 yr by andyl

depending on what you are wanting to do with your hover you could try the method explained in this thread:

 

http://www.webdesignerforum.co.uk/topic/43287-clickable-div-as-link-plus-rollover/page__p__272527__fromsearch__1#entry272527

 

means no JS and works in all browsers I have tested it in because it is simply a link

Sure.. here is the current code i have with the table, and a simple gif image above the table i

am not too efficient in code, i have only messed with it a few times so i really appreciate the help

 

<div style="display:block;text-align:left">

 

<div style="display:block;text-align:left">

 

<div style="display:block;text-align:left">

 

<div style="display:block;text-align:left">

 

<div style="display:block;text-align:left">

 

<div style="display:block;text-align:left">

 

<div style="display:block;text-align:left">

 

<div style="display:block;text-align:left">

 

<div style="display:block;text-align:left">

 

<div style="display:block;text-align:left"><a href="http://www.google.com" imageanchor="1"><span style="color:rgb(255, 255, 255)"><span><span style="background-color:rgb(255, 255, 255)"><img border="0" src="http://www.google.com/images/Long-4.gif"></span></span></span></a></div>

 

</div>

 

<div style="display:block;text-align:left">

 

<table border="1" bordercolor="#" cellspacing="0" style="border-collapse:collapse;border-top-color:rgb(136, 136, 136);border-right-color:rgb(136, 136, 136);border-bottom-color:rgb(136, 136, 136);border-left-color:rgb(136, 136, 136);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px">

 

<tbody>

 

<tr>

 

<td style="width:149px;height:14px"><span><span><span style="background-color:rgb(255, 255, 255)"> </span></span></span><span style="border-collapse:separate"><a href="http://www.google.com"><span><span><span'>http://www.google.com"><span><span><span'>http://www.google.com"><span><span><span'>http://www.google.com"><span><span><span style="color:rgb(0, 0, 0)"><span>About Us</span></span></span></span></a></span></td>

 

</tr>

 

<tr>

 

<td style="width:149px;height:14px"><span><span><span style="background-color:rgb(255, 255, 255)"> </span></span></span><span style="border-collapse:separate"><a href="mailto:email@gmail.com"><span><span><span style="color:rgb(0, 0, 0)"><span>Ask A Question</span></span></span></span></a></span></td>

 

</tr>

 

<tr>

 

<td style="width:149px;height:14px"><span><span><span> </span></span></span><span style="border-collapse:separate"><a href="http://www.google.com"><span><span><span style="color:rgb(0, 0, 0)"><span>Financials</span></span></span></span></a></span></td>

 

</tr>

 

<tr>

 

<td style="width:149px;height:14px"><span><span><span style="background-color:rgb(255, 255, 255)"> </span></span></span><span style="border-collapse:separate"><a href="http://www.google.com"><span><span><span style="color:rgb(0, 0, 0)"><span style="background-color:rgb(255, 255, 255)">Contact Us</span></span></span></span></a></span></td>

 

</tr>

 

<tr>

 

<td style="width:149px;height:14px"><span><span><span style="background-color:rgb(255, 255, 255)"> </span></span></span><span style="border-collapse:separate"><a href="http://www.google.com"><span><span><span style="color:rgb(0, 0, 0)"><span style="background-color:rgb(255, 255, 255)">Sitemap</span></span></span></span></a></span></td>

 

</tr> </tbody> </table> <br> </div> </div> </div> </div> </div> </div> </div> </div> </div>

 

By FHA Mortgage Refinance

I use the following code in my own site:

 

<td class= onmouseover=this.className='' onmouseout=this.className=''></td>

 

Just insert your own class names where necessary.