span class mouseover oder hover effekt

[biinng]

Hallo miteinander.Jch benutze PHPbb3 und das standart Templates Prosilver. Es geht um folgendes ich möchte gern wenn jemand über das Foren Bild geht per Hover Effekt die Forumbeschreibung eingeblendet wird. Ich habe auch schon ein wenig herum gebastelt aber ich bekomme es einfach nicht hin. Wenn ich nur ein Hoverefekt haben will bekomme ich das mittels Css hin aber um dann die Forumbeschreibung {forumrow.FORUM_DESC} einzublenden scheitere ich andauernd.

orginal:

Code: Alles auswählen

<!-- IF forumrow.FORUM_IMAGE --><span class="forum-image">{forumrow.FORUM_IMAGE}</span><!-- ENDIF -->
                                  <a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />
                                  {forumrow.FORUM_DESC}

wenn der User mit der Maus über das IMG {forumrow.FORUM_IMAGE} ist soll er dann die Forenbeschreibung {forumrow.FORUM_DESC} angezeigt bekommen.

Ich hoffe es kann mir jemand auf die Sprünge helfen

[Crizzo]

Hi,

nimm mal den Code:

Code: Alles auswählen

    <!-- IF forumrow.FORUM_IMAGE --><span class="forum-image">{forumrow.FORUM_IMAGE}<span> {forumrow.FORUM_DESC}</span></span><!-- ENDIF -->
                                      <a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />
                                     

und im CSS:

Code: Alles auswählen

.forum-image span {
display: none;
}
.forum-image {
position: relative;
}
.forum-image:hover span {
display: inline;
position: absolute;
top: 0;
left: 50px;
color: #000; 
}

Mit "top" und "left" kannst du den Text noch besser platzieren. Natürlich kannst du dem <span> der Beschreibung auch noch ein Hintergrundbild, -farbe oder einen Rahmen geben. Ganz wie du willst. Die Schriftfarbe hab ich als schwarz definiert.

Grüße

[Miriam]

Du kannst einen Tooltip auch ganz einfach erzeugen, indem Du Deinen Code nimmst und ihn durch diesen ersetzt:

Code: Alles auswählen

                    <!-- IF forumrow.FORUM_IMAGE --><span class="forum-image"><a href="{forumrow.U_VIEWFORUM}" title="{forumrow.FORUM_DESC}">{forumrow.FORUM_IMAGE}</a></span><!-- ENDIF -->
                    <a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />
                    {forumrow.FORUM_DESC} 

Jetzt hast Du einen Tootip beim "Überfahren" des Bildes mit der Maus und das Bild ist auch ein Link zum jeweiligen Forum.

[biinng]

Danke schön hat super Funktioniert.

Ich habe nur ein Problem ich mochte gern den Hintergrund Verlinken mit dem dazugehörigen Forum. Leider Klappt es bei mir nicht wie gewünscht.

Das ist mein versuch -->

Code: Alles auswählen

<a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />
                               <!-- IF forumrow.FORUM_IMAGE --><span class="forum-image"><a href="{forumrow.U_VIEWFORUM}" title="{forumrow.FORUM_DESC}">{forumrow.FORUM_IMAGE}</a><span>{forumrow.POSTS} {L_POSTS} in {forumrow.TOPICS} {L_TOPICS}<br /><!-- ENDIF -->
                   <!-- IF forumrow.CLICKS -->
                      <span>{L_REDIRECTS}: {forumrow.CLICKS}</span>
                   <!-- 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 /><br />
                   <!-- ENDIF -->{forumrow.FORUM_DESC}</span></span>

Ich mochte gern das der Background wenn er aufgeht dann mit dem Dazugehörigen link {forumrow.U_VIEWFORUM} versehen wird.

Code: Alles auswählen

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

Funktionierender Code aber ohne a href für den Hovereffekt

Code: Alles auswählen

<a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />
                               <!-- IF forumrow.FORUM_IMAGE --><span class="forum-image">{forumrow.FORUM_IMAGE}<span>{forumrow.POSTS} {L_POSTS} in {forumrow.TOPICS} {L_TOPICS}<br /><!-- ENDIF -->
                   <!-- IF forumrow.CLICKS -->
                      <span>{L_REDIRECTS}: {forumrow.CLICKS}</span>
                   <!-- 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 /><br />
                   <!-- ENDIF -->{forumrow.FORUM_DESC}</span></span>

[biinng]

Weiß da keiner eine Lösung oder geht das nicht das man den Hintergrund Hover Effekt mit einem Link versieht?

[Crizzo]

Ich verstehe nicht genau, was du jetzt erreichen willst.

Per :hover kannst du einen Hintergrund einblenden. Aber was soll jetzt verlinkt werden?

[biinng]

[ externes Bild ]

Ich möchte wenn jemand Über ein Forum mit der Maus geht das der ausgelöste Hovereffekt mit einem Link zu dem Entsprechendem Forum verbunden wird.
Derzeit ist es so das nur die Überschrift und das dahinter liegende Bild mit diesem Link ausgestatet ist und ich bekomme es einfach nicht hin.

Code: Alles auswählen

<a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />

das ist der Link zu dem dazugehörigen Unterforum dieser wird aber nur auf den Namen des Forums zb. DMP Team angewandt. Da baer der Hovereffekt den Namen sowie das Bild dahinter verdeckt kann natürlich niemand auf den Link klicken. Nun soll es so sein das das wenn jemand den Hovereffekt auslöst mit der Maus ebenso die Möglichkeit hat eben durch klick auf den Hintergrund zu dem entsprechenden Menü zukommen.


Das ist die CSS zu dem Hovereffekt,

Code: Alles auswählen

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

und hier denke ich das a Href eingebaut werden muss

Code: Alles auswählen

<a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />
                               <!-- IF forumrow.FORUM_IMAGE --><span class="forum-image">{forumrow.FORUM_IMAGE}<span>{forumrow.POSTS} {L_POSTS} in {forumrow.TOPICS} {L_TOPICS}<br /><!-- ENDIF -->
                   <!-- IF forumrow.CLICKS -->
                      <span>{L_REDIRECTS}: {forumrow.CLICKS}</span>
                   <!-- 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 /><br />
                   <!-- ENDIF -->{forumrow.FORUM_DESC}</span></span>

Ich denke das a href hier irgendwo eingebaut werden muss also zu <span> aber nach meinen versuchen hat es leider nie funktioniert.

Code: Alles auswählen

<!-- IF forumrow.FORUM_IMAGE --><span class="forum-image">{forumrow.FORUM_IMAGE}<span>{forumrow.POSTS} {L_POSTS} in {forumrow.TOPICS} {L_TOPICS}<br /><!-- ENDIF -->

Ich hoffe das ich es nun etwas durchsichtiger dargestellt habe .
Ansonsten noch den Link zur Seite. Wo bei es sich um das Forum handelt.

http://designmodproject.de/hproot/
User+PW= Testuser

[Crizzo]

Wie will der Benutzer den Link denn klicken, wenn er mit der Maus vom Logo geht, ist der :hover doch wieder weg.

[Miriam]

Prinzipiell sollte es so klappen:

Code: Alles auswählen

<html>
<head>
<style type="text/css">
<!--
.forum-image:hover span {
    -moz-transition: opacity 0.6s ease 0s;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    bottom: 0;
    left: 0;
    opacity: 1;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    height: 400px;
    width: 400px;
    border-radius: 10px 10px 10px 10px;
} 


a.link1 {
    display:block;
    height:400px;
    width:400px;
}

a.link2 {
    position:relative;
    top:-275px;
}

-->
</style>
</head>
<body>
    <div style="background-color:pink; width:400px; height:400px;">
        <div class="forum-image">
            <img src="http://designmodproject.de/hproot/phpBB3/images/icons/icon_110_Strategiespiele.png">
            <span>
                <a href="ganzer span #1" class="link1">Link #1 im ganzen span</a>
                <a href="nur #2" class="link2">Link #2 nur hier</a>
            </span>
        </div>
    </div>
</body>
</html>

Ist natürlich nur beispielhafter (aber funktionierender) Code. Du mußt dein Template noch etwas anpassen... denke ich.

[biinng]

Beitrag von BlackHawk87 » 18.10.2012 21:23
Wie will der Benutzer den Link denn klicken, wenn er mit der Maus vom Logo geht, ist der :hover doch wieder weg.

Sobald der Nutzer mit der Maus auf den Hovereffekt drauf klickt soll er zum passenden Menü kommen. Das Bild und der Textlink im Hintergrund sind Schnuppe da dieser nicht mehr gebraucht wird also könnte man den raus löschen.

also könnte ich aus diesem Code

Code: Alles auswählen

<a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />
                               <!-- IF forumrow.FORUM_IMAGE --><span class="forum-image">{forumrow.FORUM_IMAGE}<span>{forumrow.POSTS} {L_POSTS} in {forumrow.TOPICS} {L_TOPICS}<br />

das machen damit das Bild und die Überschrift nicht mehr als Link gelten da sie ja sowieso nicht anklickbar sind

Code: Alles auswählen

<span class="forumtitle">{forumrow.FORUM_NAME}<br />
                               <!-- IF forumrow.FORUM_IMAGE --><span class="forum-image">{forumrow.FORUM_IMAGE}<span>{forumrow.POSTS} {L_POSTS} in {forumrow.TOPICS} {L_TOPICS}<br />

aber wie sage ich dem Hovereffekt das wenn er geklickt wird dort hin geht

Code: Alles auswählen

<a href="{forumrow.U_VIEWFORUM}" class="forum-image span">{forum-image:hover span???}</a>