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

Hjälp med hover effekt i CSS

1
Skriv svar
Permalänk
Medlem
●

Hjälp med hover effekt i CSS

Jag vill att alla bilder på min blogg som läggs upp ska få en border.

Det har jag löst med följande kod:

div#sblog_main  img {
	padding: 3px;
	border:2px solid #000;
}

Men jag vill även att det ska finnas en hovereffekt så att bordern ändrar färg vid hover.

Om det är bilder som är länkar brukar jag använda följande kod (funkar):

div#sblog_main a.hover img {
	border:2px solid #ccc;
}

Men den funkar ju (fullt logiskt) inte i mitt fall nu.

Så vad ska jag använda istället, nu när det inte bilderna är länkar?

(jag har prövat följande:

          div#sblog_main hover img
          div#sblog_main:hover img
          div#sblog_main img:/.hover

utan önskvärt resultat.)

Redigera
Citera flera Citera
Permalänk
Hedersmedlem
●

img:hover fungerar utmärkt i FF/Opera då det är standard. Men inte i IE.

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
div#sblog_main a img:hover {
	border-color: #ccc;
}
Redigera
Citera flera Citera
Permalänk
Medlem
●

Finns det någon lösning för att få till det även i IE ?

Redigera
Citera flera Citera
Permalänk
Medlem
●

IE stödjer bara hover om det är i samband med en länk, <a>.

Visa signatur

metal

Redigera
Citera flera Citera
Permalänk
Hedersmedlem
●
Citat:

Ursprungligen inskrivet av hamp0e
Finns det någon lösning för att få till det även i IE ?

JavaScript.

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

Hur skulle ett sådant JavaScript kunna se ut? eller en möjlig sökterm på google?

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

http://dean.edwards.name/IE7/ kan man använda också

Redigera
Citera flera Citera
Permalänk
Medlem
●

CladaM: ?

Redigera
Citera flera Citera
Permalänk
Medlem
●

a:hover img funkar ju annars även i IE. Exempel:

a img {
  border: 1px solid #000;
}

a:hover img {
  border-color: #F00;
}
Visa signatur

Personlig webbplats Talman2Batmanizer Slänko Remindera
Greasemonkey-script Artwork of Johanna Öst

Redigera
Citera flera Citera
Permalänk
Medlem
●

Malesca:
Jo, men problemet är att det är inga länkade bilder, utan vanliga bilder...

Redigera
Citera flera Citera
Permalänk
Medlem
●

Det går som sagt inte att lösa med CSS i IE eftersom IE bara klarar av :hover-attributen på a, medan de andra browersarna klarar det på allt(?)

Visa signatur

i5-4670k | GTX 670 | ASUS Z87-A | 2x4GB Corsair Vengeance 1333 MHz | Corsair VX 450 | 80 GB Intel X25 SSD systemdisk | 256 GB Samsung 840 spel/cachedisk | 2+3 TB WD Green lagringsdiskar | Fractal Define R4 | G2420HDBL (24") + L227WT (22")

Citera för svar!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ingen: Det har jag inhämtat. Nu söker jag alltså efter ett kopletterande JavaScript.

Någon som kan bistå?

Redigera
Citera flera Citera
Permalänk
Testpilot
●

Jo, det kan jag väl
Bild som ändras:

<img src="bild.png" alt="bild" onmouseover="src='bild_over.png'" onmouseout="src='bild.png'" />

Ram som ändras:

<img src="bild.png" alt="bild" onmouseover="style.borderColor='#ccc'" onmouseout="style.borderColor='#000'" />

Kräver att du satt stilen och bredden på ramen i en css-fil eller liknande

Senast redigerat
Visa signatur

Kolla gärna in min RGB-LED-ljusstake i galleriet
[Gigabyte GA-Z97MX-Gaming 5][Intel Core i5 4690K][Corsair XMS3 16GB][Asus GeForce RTX 2060 Super Dual Evo OC]

Redigera
Citera flera Citera
1
Skriv svar