jQuery versus CSS

An einem kleinen Beispiel soll gezeigt werden inwiefern CSS und ein JS-Framework gleiche Funktionalitäten bieten aber auch gleichzeitig wo Unterschiede liegen.
Folgendes Codestück legt ein Zoom Icon über ein Bild rein unter zuhilfe von CSS. Hierbei wird ein leeres span-Tag eingefügt auf das wir später unser Icon legen wollen.

^?View Code HTML

<div id="picGallery">
    <h2>CSS-Code</h2>
    <a href="someBigPic.jpg">
        <span></span>
        <img src="someSmallerPic.jpg" alt="" />
    </a>
    <a href="anotherBigPic.jpg">
        <span></span>
        <img src="AnotherSmallPic.jpg" alt="" />
    </a>
</div>

Das CSS sähe dabei so aus:

^?View Code CSS

#picGallery{
    width:       100%;
    overflow:  hidden;
}
#picGallery a {
    position:   relative;
    float:         left;
    margin:     5px;
}
#picGallery a span {
   display:none;
   background-image:url(zoom.png);
   background-repeat:no-repeat;
   width:48px;
   height:48px;
   position:absolute;
   left:15px;
   top:15px;
}
#picGallery img {
   border:    solid 1px #999;
   padding:  5px;
}
#picGallery  a:hover span {
   display:   block;
}

Soweit sogut. Nun mit Hilfe von jQuery. Der HTML Teil ist fast identsich. Allerdings brauchen wir hier die span-Tags noch nicht.

^?View Code HTML

<div id="picGallery">
    <h1>jQuery Code</h1>
    <a href="someBigPic.jpg">
        <img src="someSmallerPic.jpg" alt="" />
    </a>
    <a href="anotherBigPic.jpg">
        <img src="AnotherSmallPic.jpg" alt="" />
    </a>
</div>

Der JS-Code erzeugt den span und kümmert sich um das Einblenden..

^?View Code JAVASCRIPT

   $(document).ready(function(){
      //Füge jedem a-tag in dem div mit der id "picGallery" ein span-Tag hinzu
      $("#picGallery a").append("<span></span>");
      //Standard fading Funktionen von jQuery
      $("#gallery2 a").hover(function(){
      $(this).children("span").fadeIn(600);
      },
      function(){
      $(this).children("span").fadeOut(200);
      });
});

Das wars auch schon. Natürlich muss das CSS im HTML Dokument referenziert werden, allerdings kann dann die a:hover Eigenschaft weggelassen werden. Bei Click würde das Bild in einem neuen Fenster geöffnet, bei Bedarf ließe sich noch ein Bildergalerie Skript damit verbinden. Ich hoffe das bei Gelegenheit noch vorstellen zu können.
Viel Erfolg!!