span class mouseover oder hover effekt

[biinng]

Ich habe es nun anders gelöst. Hier nun das Resultat.

hier ein Forenausschnitt ohne eine Aktion auszulösen.
[ externes Bild ]

hier der Hovereffekt eines Forums
[ externes Bild ]

und zum Schluss noch den Hovereffekt wenn man mit dem Mauszeiger auf den Link klickt.
[ externes Bild ]

Code:

Code: Alles auswählen

<!-- IF catrow.CHILDREN_COUNT > $FORUMS --><div style="float: left; width: 49.95%;"><!-- ELSE --><div style="width: 100%"><!-- ENDIF -->
                <ul class="topiclist forums">
                   <!-- BEGIN forumrow -->
                      <!-- IF forumrow.S_ROW_COUNT is even or catrow.CHILDREN_COUNT <= $FORUMS -->
                        <li class="row">
                         <dl class="icon" style="background-image: url({forumrow.FORUM_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
                            <dt title="{forumrow.FORUM_FOLDER_IMG_ALT}">
                            <span class="forumtitle">{forumrow.FORUM_NAME}<br />
                               <!-- IF forumrow.FORUM_IMAGE --><span class="forum-image">{forumrow.FORUM_IMAGE}<span class="vordergund"><a href="{forumrow.U_VIEWFORUM}" class="vordergund-link"></a>{forumrow.POSTS} {L_POSTS} in {forumrow.TOPICS} {L_TOPICS}<br /><!-- ENDIF -->
                   <!-- IF forumrow.CLICKS -->
                      {L_REDIRECTS}: {forumrow.CLICKS}
                   <!-- ELSEIF not forumrow.S_IS_LINK -->
                      <!-- IF forumrow.LAST_POST_TIME --> <br /><a href="{forumrow.U_LAST_POST}" title="{forumrow.LAST_POST_TIME}">{LAST_POST_IMG} {L_LAST_POST}</a> {L_POST_BY_AUTHOR} {forumrow.LAST_POSTER_FULL}
                       <!-- ELSE -->{L_NO_POSTS}<!-- ENDIF --><br />
                   <!-- ENDIF -->{forumrow.FORUM_DESC}
                               <!-- IF forumrow.MODERATORS -->
                                  <br /><br /><strong>{forumrow.L_MODERATOR_STR}:</strong> {forumrow.MODERATORS}
                               <!-- ENDIF --></span></span>
                               <!-- IF forumrow.SUBFORUMS and forumrow.S_LIST_SUBFORUMS --><br /><strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}<!-- ENDIF -->
                            </dt>
                         </dl>
                      </li>
                   <!-- ENDIF -->
                <!-- END forumrow -->
                </ul>
             </div>
          </div>

CSS:

Code: Alles auswählen

.forum-image {
    border: 0 none;
    float: left;
    margin-top: 5px;
    min-height: 108px;
    top: 3px;
}


.vordergund {
    -moz-transition: opacity 0.9s ease 0s;
    border: 0 none;
    bottom: 0;
    left: 0;
    opacity: 0;
    padding-left: 65px;
    padding-top: 25px;
    position: absolute;
    top: 0;
    right: 0;
}

.vordergund:hover {
    -moz-transition: opacity 0.9s ease 0s;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    border: 0 none;
    bottom: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    overflow: hidden;
    padding-left: 65px;
    padding-top: 25px;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 10px 10px 10px 10px;
    right: 0;
}

.vordergund-link {
    -moz-transition: opacity 0.9s ease 0s;
    background: url("./images/soldat0.png") no-repeat scroll 0 0 transparent;
    border-radius: 10px 10px 10px 10px;
    display: block;
    height: 101px;
    left: 80%;
    position: absolute;
    top: 20px;
    width: 50px;
    opacity: 1;
}

.vordergund-link:hover {
    -moz-transition: opacity 0.9s ease 0s;
    background: url("./images/soldat1.png") no-repeat scroll 0 0 transparent;
    border-radius: 10px 10px 10px 10px;
    display: block;
    height: 101px;
    left: 80%;
    position: absolute;
    top: 20px;
    width: 50px;
    opacity: 1;
}

.vordergund-link:active {
    background: url("./images/soldat2.png") no-repeat scroll 0 0 transparent;
    border-radius: 10px 10px 10px 10px;
    display: block;
    height: 101px;
    left: 80%;
    position: absolute;
    top: 20px;
    width: 50px;
}

[BNa]

Gut gelöst und sieht gut aus. Danke fürs teilen.