10 svar · 199 visningar · startad av roady
Som nu när jag gör mouseover funktioner med .css så kan jag väldigt smidigt ändra en textfärg när jag tar musen över, men hur gör jag ifall jag vill att den skall behålla färgen och gå tillbaka till grundfärg först när jag tar musen över en annan länk.? (skall vara i en meny)
skall man göra någon function för det eller ?
någon som har förslag eller kanske ännu bättre, har något färdigt ?
jag skulle kunna använda mig utav onMouseOver="this.className='selected'" på varje länk för att få den ändra till ett annan stil (css), men hur gör jag för att få bort det när jag tar musen över en annan länk.
kan man inte välja flera id-taggar samtidigt ?
någon med onMouseOver="document.id[meny].className='link'" eller hur gör man ?
Så här kan du göra:
<script type="text/javascript">
<!--
function highlight(o){
o.className = "selected";
if(! focus) focus = o;
if(! (focus == o)){
focus.className = "normal";
focus = o;
}
};
//-->
</script>
...
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
:)
vet inte om jag gör fel, men de blir markerade och håller den nya stylen, men de ändras icke tillbaka =(
testade en sådan här varian.
<a href="#" class="link" id="meny" onMouseOver="this.className='selected'">en länk</a> ||
<a href="#" class="link" onMouseOver="document.all.meny.className='link'">nästa länk</a>
det funkar, men så fort jag lägger till fler länkar med id="meny" så slutar det att fungera!
Har du gjort en ".normal" i din CSS?
...
.normal {
color : blue;
}
...
Då skall det fungera. Annars får du posta din kod.
:)
troligtvis något som jag kört ihop, får ett felmeddelande på sidan med koden också!
något med objektet inte stödjer egenskapen eller metoden!
<html>
<head>
<script type="text/javascript">
<!--
function highlight(o){
o.className = "selected";
if(! focus) focus = o;
if(! (focus == o)){
focus.className = "normal";
focus = o;
}
};
//-->
</script>
<style type="text/css">
<!--
.link {
color: #0033FF;
text-decoration: underline;
}
.normal {
color : blue;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
a.link:hover {
color: #990000;
text-decoration: none;
}
.selected {
color: #990000;
text-decoration: none;
}
-->
</style>
</head>
<body>
...<br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
</body>
</html>
jag tänkte lite vidare sådär, efter som det som jag testa inte kan innehålla flera länkar med samma ID tag. kan man inte göra en loop då?
fast jag får det som vanligt inte att fungera.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.link {
color: #0033FF;
text-decoration: underline;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
a.link:hover {
color: #990000;
text-decoration: none;
}
.selected {
color: #990000;
text-decoration: none;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function deselect(){
for(var i=1, i=3, i++){
document.all.meny[i].className='link';
}
}
// -->
</script>
</head>
<body>
<a href="#" class="link" id="meny1" onMouseOver="deselect(); this.className='selected'">en länk</a> ||
<a href="#" class="link" id="meny2" onMouseOver="deselect(); this.className='selected'">nästa länk</a> ||
<a href="#" class="link" id="meny3" onMouseOver="deselect(); this.className='selected'">ännu en länk</a>
</body>
</html>
Det var jag som klantade till det. Lägg till följande:
[B]var focus = null;[/B]
function highlight(){
...
:)
haha... du Peter....
nu har du slarvat bort mig totalt =)
kan du inte posta hela din kod igen som den ser ut nu!
Sorry :bire
<script type="text/javascript">
<!--
var focus = null;
function highlight(o){
o.className = "selected";
if(! focus) focus = o;
if(! (focus == o)){
focus.className = "normal";
focus = o;
}
};
//-->
</script>
...
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
<a href="" onmouseover="highlight(this)">Foo</a><br>
:)
sådär.... nu funkar det kanon.
tack så hemskt mycket för hjälpen Peter :)