Question

I read that you could make some easy CSS Tooltips with a Span, so I tried it, but it wont work for me and i have troubles figuring out why:

if($result = $mysqli->query($query)) {
    while($obj = $result->fetch_object()) {
        $image = $obj->Image;
        $page  = $obj->Page;
        $name  = $obj->Name;
        if($image != null) {
            echo "<a href=" . $page . " target=_parent><img src=" . $image . " width=93 height=66><span class=info>test</span></img></a> ";
        }
    }
}

and the CSS:

  <style type="text/css">
    body,td,th {
        font-family: "Myriad Pro";
        font-size: 12px;
        background-color:#fcfcfc;;
    }
    a {
        border:none;
    }
    img {
        border:thin solid;
        border-color:CCC    
    }
    img:hover {
        opacity:0.5;    
    }
    span.info {
        display:none;   
    }
    img:hover span.info {
        display:block;position:absolute; width:200px; height:200px; 
    }
    </style>

My Problem is that the Span wont show at all.
Anybody some ideas how to fix this?

Answer 1

The selector you’re looking for is this:

img:hover + span.info {
    display:block;position:absolute; width:200px; height:200px; 
}

The + is for adjacent elements. Using a space is for descendant elements (and span is most definitely not a descendant of img).