:hover på div på enkelt sätt i IE6

[L. Gustafsson]

Hej!

 

Kan man på ett enkelt sätt - få en en hover funktion att fungera på ett div lager i en taskig webbläsare som IE6?

 

Jag har försökt ta till mig alla möjliga lösningar men ännu inte hittat nån som jag egentligen förstår på ett bra sätt - ja, antingen är det jag som inte hänger med eller är helt enkelt förklaringen något difus....

 

I vilket fall - jag vill bara att en border ska byta färg när man för musen över och det hade varit snyggast att sköta det i CSS.

 

 
<div class="pushitems">
  <img src="../Images/puff1.jpg" alt="" />
  <h3>Just nu</h3>
  <p>2007-05-22</p>
  <h4>Lorem Ipsumh4>
  <p>Lorem Ipsum et dolor...</p>
</div>

 

CSS kod som funkar i Firefox mm

 

div.pushitems:hover {
border:1px solid green;

}

 

Så om någon där ute kan ge mig ett bra och "enkel" lösning på detta så vore jag väldigt tacksam.

 

/Lars

 

[Cluster]

IE köper inte hover på alla objekt. Du får istället använda javascript (onMouseOver).

http://www.google.se/search?q=onmouseover+%2Bcss+change+class

 

/Cluster

------------------------------------------------------------

Ditt vetande är värdelöst om inte andra vet att du vet

-----------> http://eforum.kicks-ass.net <------------

 

[Jonas__B]

Det är smidigt gjort med ett Javascriptbibliotek som heter jQuery

www.jquery.com

 

Tar LI som exempel eftersom hover inte fungerar på LI element i IE6

Först lägg in jquery:

<script type="text/javascript" src="http://jquery.com/src/jquery-latest.js"></script>

(du kan även ladda ner den jag ha den bland dina egna filer - lite bättre responstid på första inläsning.

 

Sedan lägger du till en css klass som hovereffekten skall använda:

<style type="text/css">
.red {color: red;}
</style>

 

Och till sist - eventet.

<script type="text/javascript">
   <!--
   $(function() {
	$("li").hover(function() {
		$(this).addClass("red");
	}, function() {
		$(this).removeClass("red");
	});		
});	
  // -->
</script>

Denna tar just alla LI element och gör att vid hover så lägger den till en klass.

du kan byta ut $("li") mot ditt specifika div element $("#div-element")

som då är <div id="div-element">

 

 

Vill du inte göra en css-klass gör det bra att definiera stil i funktionen:

<script type="text/javascript">
   <!--
   $(function() {
	$(".pushitems").hover(function() {
		$(this).css( "border", "1px solid green" );
	}, function() {
		$(this).css( "border", "1px solid white" );
	});	
});	
  // -->
</script>

edit: gjorde det lite mer specifikt för ditt fall.

 

[inlägget ändrat 2007-08-22 11:06:52 av Jonas_Bo]

[inlägget ändrat 2007-08-22 11:09:14 av Jonas_Bo]

[L. Gustafsson]

Hej och Tack!

 

Jag ska gladeligen testa nu. Men är detta allt som behövs - ingen onmouseover på de olika elementen som triggar igång funktionen?

 

Och nu har jag testat och sett att det INTE behövs nån funktion men jag har en annan undran;

 

Om man man förutom att ändra border-color också vill ändra bakgrundsbild - hur definierar man upp det då? Om vi utgår från det fina exemplet som du gjort med pushitems?

Lägger man till ytterliggare en rad i scriptet?

 

Om inte har en klass utan ett antal <li> som tillhör ett visst id - hur gör man då?

 

Tex som testmenyn nedan:

 

<ul id="mainmenu">
     <li><a href="#">Hem</a></li>
     <li><a href="#">Om</a></li>
     <li><a href="#">Nyheter</a></li>
     <li><a href="#">Lorem</a></li>
     <li><a href="#">Fakta </a></li>
   </ul>

 

Kan man tända och släcka dessa också med denna lösning?

 

/Lars - som tackar för all hjälp

 

 

[inlägget ändrat 2007-08-23 17:45:56 av L. Gustafsson]

[Jonas__B]

ja det kan man.

med hjälp av att lägga till en css-klass som i exemplet så kan man i cssen definiera background (färger och bakgrundsbild)

 

 

<script type="text/javascript">
<!--
$(function() {
$("#mainmenu li").hover(function() {
$(this).addClass("over");
}, function() {
$(this).removeClass("over");
});
});
// -->
</script>

 

I css fixar du själv bakgrundsbilden

 

Är det olika bilder för varje list-punkt är det inga problem heller, men smidigast så lägger du ihop "mouseover" och "mouseoff" bilderna så det bara är en bild och i cssen endast ändrar background-position.

 

 

#mainmenu li { background: #fff url(bilder/bild1.gif) no-repeat 0 0;  }
.over {background-position: 50% 0;}

 

hänger du med?