CSS Selektor Test

Wenn man mit der Maus über die folgenden Zeilen fährt werden, solange man mit der Maus über dem Text steht, Bilder eingeblendet.

Das ein- und ausblenden der Bilder wurde nur mit CSS (ohne Javascript) realisiert.

In der ersten Zeile werden durch den Elternoperator '>' werden alle divs die in einem div stecken selektiert und mit 'display:none' ausgeblendet. In der zweiten Zeile werden die bilder durch 'display:block' eingeblendet aber nur wenn die maus über dem Elternelement steht (:hover).

div.top div>div{ display: none; }
div.top div:hover>div{ display: block; }
500
Smith and Wesson 500 Magnum Revolver
500 hunting
Smith and Wesson 500 Magnum Revolver - hunting version
Desert Eagle
Desert Eagle Pistol
460
Smith and Wesson 460 XVR Revolver
460 hunting
Smith and Wesson 460 XVR Revolver - hunting version