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

Citat:

Ursprungligen postat av Advocacy (Inlägg 20416929)

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>