förstora div på hover, lägga sig över grannar

Advocacy · 2011-09-08, 12:16

Hej, välkommen till tråden med den sämsta rubriken, men visste inte vad jag skulle skriva. Jag skulle vilja höra vad ni anser är best practice för att lösa detta scenario i css:

Tänk er att det ligger 5 stycken divvar bredvid varandra, en bild i varje. Låt säga att man hovrar på den tredje divven, då ska den bli (t.ex.) 20 pixlar bredare och 15 högre, samt lägga sig över den andra och fjärde divven, z-index-mässigt. När musen försvinner ska det återgå till normalt.

Hur löser man det bäst, positioneringsmässigt och semantiskt? Man hade väl kunnat ha fem stycken kopior av divvarna i den lite större storleken, som är default hidden, absolut positionerade och som visas på hover. Men är inte detta en omständig och resurs-slösande lösning? Alternativet är väl att modifiera den aktuella divven när musen kommer över, men det känns också svårt. Grann-divvarna kommer ju förskjutas om den aktuella divven ändras i storlek, eftersom de ligger bredvid varandra.

Jag vet inte om jag lyckats framföra vad jag menar, annars får ni säga till.

Syke · 2011-09-08, 13:02

Citat:

Ursprungligen postat av Advocacy

Hej, välkommen till tråden med den sämsta rubriken, men visste inte vad jag skulle skriva. Jag skulle vilja höra vad ni anser är best practice för att lösa detta scenario i css:

Tänk er att det ligger 5 stycken divvar bredvid varandra, en bild i varje. Låt säga att man hovrar på den tredje divven, då ska den bli (t.ex.) 20 pixlar bredare och 15 högre, samt lägga sig över den andra och fjärde divven, z-index-mässigt. När musen försvinner ska det återgå till normalt.

Hur löser man det bäst, positioneringsmässigt och semantiskt? Man hade väl kunnat ha fem stycken kopior av divvarna i den lite större storleken, som är default hidden, absolut positionerade och som visas på hover. Men är inte detta en omständig och resurs-slösande lösning? Alternativet är väl att modifiera den aktuella divven när musen kommer över, men det känns också svårt. Grann-divvarna kommer ju förskjutas om den aktuella divven ändras i storlek, eftersom de ligger bredvid varandra.

Jag vet inte om jag lyckats framföra vad jag menar, annars får ni säga till.

Menar du något så här?

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Meh</title>
		
		<style type="text/css" media="screen">
			ul {
				position: relative;
				margin: 100px 0 0 100px;
				padding: 0;
			}
			
			ul li {
				list-style-type: none;
				position: absolute;
				width: 50px;
				height: 50px;
				background-color: #0a0;
			}
			
			ul li:hover {
				width: 100px;
				height: 100px;
				margin-top: -25px;
				margin-left: -25px;
				z-index: 100;
			}
			
			#box1 {
				top: 0;
				left: 0;
			}
			
			#box2 {
				top: 0;
				left: 60px;
			}
			
			#box3 {
				top: 0;
				left: 120px;
			}

			#box4 {
				top: 0;
				left: 180px;
			}

			#box5 {
				top: 0;
				left: 240px;
			}

		</style>
		
	</head>
	<body>
		<ul>
			<li id="box1">Box 1</li>
			<li id="box2">Box 2</li>
			<li id="box3">Box 3</li>
			<li id="box4">Box 4</li>
			<li id="box5">Box 5</li>
		</ul>
	</body>
</html>

allstars · 2011-09-08, 13:08

absolut postionering i förhållande till föräldern är bäst, då behöver du endast ändra top, left,right, bottom samt width-height utan att detta påverkar andra element.

Advocacy · 2011-09-08, 15:30

ahh tack så mycket! guld

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

förstora div på hover, lägga sig över grannar