Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Mouseover-bakgrundsbyte i CSS?

1
Skriv svar
Permalänk
Medlem
●

Mouseover-bakgrundsbyte i CSS?

God morgon i stugan!

Jag håller på och bygger upp min första sida i XHTML och CSS, och jag vill att sidans layout helt ska bero på hur CSS-filen ser ut (csszengarden-style). Har dock ett problem med min meny. Vill att bakgrunden i rutan där texten står ska bytas med en mouseover-effekt.

Såhär ser min meny ut:

<ul id="meny">
	<li onclick="location='index.php?sida=nyheter'">Nyheter</li>
	<li onclick="location='index.php?sida=medlemmar'">Medlemmar</li>
	<li onclick="location='index.php?sida=matcher'">Matcher</li>
	<li onclick="location='index.php?sida=meriter'">Meriter</li>
	<li onclick="location='index.php?sida=forum'">Forum</li>
</ul>

CSS:

#meny li {
	background: url(img/meny-lank-bg.gif);
	padding: 3px; 
	margin: 2px;
	list-style: none;
}
	
#meny li:hover {
	background-image: none;
	background-color: #DBDBDB;
	cursor: pointer;
}

Problemet är (som vanligt) att detta funkar utmärkt i firefox, men inte i internet explorer.

Har testat att lägga in onmouseover="this.className='MO'" i <li>-taggen och skrivit in klassen .MO i stylesheetet:

.MO {
	background: none;
	background: #DBDBDB;
	cursor: pointer;
}

Cursorn blir då rätt i IE, men bakgrunden ändras inte.

Nån som har en lösning?

Edit: Problemet är löst! Tack till vigge89 och Steen.

Såhär gjorde jag:

HTML:

<ul id="meny">
	<li><a href="index.php?sida=nyheter">Nyheter</a></li>
	<li><a href="index.php?sida=medlemmar">Medlemmar</a></li>
	<li><a href="index.php?sida=matcher">Matcher</a></li>
	<li><a href="index.php?sida=meriter">Meriter</a></li>
	<li><a href="index.php?sida=forum">Forum</a></li>
</ul>

CSS:

#meny li a {
	display: block;
	height: 13px;
	padding: 3px; 
	margin: 2px;
	color: #000000;
	text-decoration: none;
	background: url(img/meny-lank-bg.gif);
}

#meny li a:hover {
	background: #DBDBDB;
}
Senast redigerat
Visa signatur

Zax
Nikon D90 | Nikkor AF-S 35/1.8 | Tamron AF SP 17-50/2.8 | Sigma HSM 50-150/2.8 II | Nikkor 55/1.2 | Nikkor 43-86/3.5
flickr | 5∞px

Redigera
Citera flera Citera
Permalänk
Hedersmedlem
●

IE har inte stöd för att ändra bakgrunde på det sättet med CSS...

Du kan ju däremot göra det med javascript

onmouseover="this.style.backgroundColor='#DBDBDB';"
Visa signatur

Vim
Kinesis Classic Contoured (svart), Svorak (A5)
Medlem i signaturgruppen Vimzealoter.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av m0REc
IE har inte stöd för att ändra bakgrunde på det sättet med CSS...

Du kan ju däremot göra det med javascript

onmouseover="this.style.backgroundColor='#DBDBDB';"

Ack

Då försvinner möjligheten med att ändra layouten i css-filen :/

Visa signatur

Zax
Nikon D90 | Nikkor AF-S 35/1.8 | Tamron AF SP 17-50/2.8 | Sigma HSM 50-150/2.8 II | Nikkor 55/1.2 | Nikkor 43-86/3.5
flickr | 5∞px

Redigera
Citera flera Citera
Permalänk
Hedersmedlem
●

Zax: Ja, tyvärr Din kod fungerar i FF men IE vet ju alla hur den är man snackar om CSS.

Visa signatur

Vim
Kinesis Classic Contoured (svart), Svorak (A5)
Medlem i signaturgruppen Vimzealoter.

Redigera
Citera flera Citera
Permalänk
Medlem
●

lägg ett ankare inuti list-item då, fungerar för mig
vill du ha koden så säg bara till

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av vigge89
lägg ett ankare inuti list-item då, fungerar för mig
vill du ha koden så säg bara till

Hmm.. ett ankare?
Du menar såhär?
<li onclick="location='index.php?sida=nyheter'" onmouseover="this.className='MO'"><a name="wtf"></a>Nyheter</li>

Hjälper inte för mig iaf. Låter ologiskt att det skulle funka
Menar du på nåt annat sätt så får du gärna visa koden.

Visa signatur

Zax
Nikon D90 | Nikkor AF-S 35/1.8 | Tamron AF SP 17-50/2.8 | Sigma HSM 50-150/2.8 II | Nikkor 55/1.2 | Nikkor 43-86/3.5
flickr | 5∞px

Redigera
Citera flera Citera
Permalänk
Medlem
●

IE stöder bara :hover för a-element..

Redigera
Citera flera Citera
Permalänk
Medlem
●

http://css.maxdesign.com.au/listamatic/index.htm

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Zax
Hmm.. ett ankare?
Du menar såhär?
<li onclick="location='index.php?sida=nyheter'" onmouseover="this.className='MO'"><a name="wtf"></a>Nyheter</li>

Hjälper inte för mig iaf. Låter ologiskt att det skulle funka
Menar du på nåt annat sätt så får du gärna visa koden.

<div id='menu'>
<ul>
<li class='left'><a href='/' title='start' id='active'>start</a></li>
<li><a href='/p/resources/' title='resources'>resources</a></li>
<li><a href='/p/links/' title='links'>links</a></li>
<li><a href='/p/comp/' title='computer'>computer</a></li>
<li><a href='/p/about/' title='about'>about</a></li>
<li><a href='/p/admin/' title='admin'>admin</a></li>
</ul>
</div>

sådär ser min kod ut @ vigge.net, och här är css-delen:

#menu {
	border: 0; margin: 0; padding: 0;
}

#menu ul {
	background: #566;
	padding : 0; margin : 0;
	white-space : nowrap;
	float : none;
	width : 100%;
	list-style-type: none;
	text-align: center;
}

#menu ul li {
	display: inline;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;
}

#menu ul li a {
	width: 98px; height: 1.4em;
	border: 1px solid #566; border-right: none;
	padding: 0;	margin: 0;
	display: block;
	color: #233; background: #eee;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	font-size: x-small; 
}

#menu ul li.left a	{ border-left: none; }

#menu ul li a:hover {
	color: #eee;
	background: #899;
}

#menu ul li #active {
	color: #344; background: #bcc;
	font-weight: bold;
}

Använder du koden vill jag helst att du inte kopierar direkt av, blir lite tråkigt för mig om någon har snott min design

förstår inte varför du använder onclick?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av vigge89

sådär ser min kod ut @ vigge.net, och här är css-delen:

Använder du koden vill jag helst att du inte kopierar direkt av, blir lite tråkigt för mig om någon har snott min design

förstår inte varför du använder onclick?

Ok, ska testa det. Anledningen till att jag använder onclick är för att man ska kunna klicka var som helst i rutan. Inte bara på texten.

edit: aha, nu börjar det likna nåt. har alltid undrat vad display:block; ska var bra för, men nu börjar det klarna
thx

Senast redigerat
Visa signatur

Zax
Nikon D90 | Nikkor AF-S 35/1.8 | Tamron AF SP 17-50/2.8 | Sigma HSM 50-150/2.8 II | Nikkor 55/1.2 | Nikkor 43-86/3.5
flickr | 5∞px

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Zax
Ok, ska testa det. Anledningen till att jag använder onclick är för att man ska kunna klicka var som helst i rutan. Inte bara på texten.

edit: aha, nu börjar det likna nåt. har alltid undrat vad display:block; ska var bra för, men nu börjar det klarna
thx

med koden jag visade går det att klicka varsomhelst på rutan
kolla min hemsida för exempel: http://vigge.net/

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av vigge89
med koden jag visade går det att klicka varsomhelst på rutan
kolla min hemsida för exempel: http://vigge.net/

Förstod det. därav min edit

Nu funkar allt som det ska. Lägger lösningen i förstaposten. Tack för hjälpen!

Visa signatur

Zax
Nikon D90 | Nikkor AF-S 35/1.8 | Tamron AF SP 17-50/2.8 | Sigma HSM 50-150/2.8 II | Nikkor 55/1.2 | Nikkor 43-86/3.5
flickr | 5∞px

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara