Ergebnis 1 bis 10 von 10

Thema: Hover-Effekt funktioniert nicht

  1. #1
    HTML Newbie
    Registriert seit
    13.11.2018
    Beiträge
    8
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Hover-Effekt funktioniert nicht

    Hallo ihr Lieben!

    Mein Portfolio hat auf der Startseite 6 Kacheln mit einem Hover-Effekt.
    Dieser Effekt soll bei allen Kacheln wie bei den ersten 4 Kacheln angezeigt werden.
    Trotz gleichem Code (sofern ich nichts übersehen habe) funktioniert der Hover nicht.

    Bitte um schnelle Hilfe!!
    Angehängte Dateien Angehängte Dateien

  2. #2
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    336
    Danke
    0
    Bekam 75 mal "Danke" in 75 Postings

    Standard AW: Hover-Effekt funktioniert nicht

    Poste den Code... keiner wird hier eine gezippte Datei runter laden.
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    13.11.2018
    Beiträge
    8
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Hover-Effekt funktioniert nicht

    hab ich mir hinterher auch so gedacht, sorry.

    HTML-Code:
    <div class="pro_layer">
    <div class="pro_shadow">
        <a href="legalrape.html">
        <div class="mask3">04 Legal Rape</div>
        <div class="mask32">Die Plakatserie „LEGAL RAPE“ protestiert gegen das Strafrecht in Bezug auf Vergewaltigung und sexuelle Gewalt.</div> </a>
    </div>
    </div>
    
    
    <div class="bar_layer">
    <div class="bar_shadow">
        <a href="bar.html">
        <div class="mask5">05 Animation</div></a>
        <div class="mask52">Dieses Video entstand innerhalb eines Kurses für das Programm Cinema 4D.</div> 
    </div>
    </div>
    Code:
    .pro_layer {
        position: relative;
        /*width:290px;*/
        flex:30%;
        margin-top:-10px;
        height:290px;
        /*margin-left:27.9%;*/
        background-repeat:no-repeat;
        z-index: 0;
        background-image:url(bilder/hochtitel.jpg);
    }
    
    
    .pro_shadow {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.5);
        -moz-transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        opacity: 0;    
    
    
    }
    
    
    .pro_layer:hover .pro_shadow{
        opacity: 1;
    }
    
    
    .bar_layer:hover .bar_shadow{
        opacity: 1;
    }
    
    
    
    
    .bar_layer {
        position: relative;
        /*width:290px;*/
        flex:30%;
        margin-left:10px;
        margin-top:-10px;
        display:flex;
        height:290px;
        /*margin-left:27.9%;*/
        background-image:url(bilder/titel_bar.png);
        background-repeat:no-repeat;
        z-index: 0;
    }
    
    
    ​.bar_shadow {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.5);
        -moz-transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        opacity: 1;    
    
    
    }
    
    .mask3 {
        position:absolute;
        /*width:200px;*/
        width:80%;
        padding-left:10%;
        margin-top:70px;
        text-align:center;
        z-index: 2;
        font-size: 1em;
        font-family: 'Oswald', sans-serif;
    }
    
    
    .mask32 {
        position:absolute;
        width:80%;
        padding-left:10%;
        margin-top: 140px;
        text-align:center;
        /*width:260px;*/
        z-index: 2;
        font-size: 0.5em;
        color:#FFF;
        font-family: 'Quicksand', sans-serif;
    }
    
    .mask5 {
        position:absolute;
        /*width:200px;*/
        width:80%;
        padding-left:10%;
        margin-top:70px;
        text-align:center;
        z-index: 2;
        font-size: 1em;
        font-family: 'Oswald', sans-serif;
    }
    
    
    .mask52 {
        position:absolute;
        width:80%;
        padding-left:10%;
        margin-top: 140px;
        text-align:center;
        /*width:260px;*/
        z-index: 2;
        font-size: 0.5em;
        color:#FFF;
        font-family: 'Quicksand', sans-serif;
    }
    Geändert von Arne Drews (14.11.2018 um 08:34 Uhr) Grund: MOD: Code-Tags eingefügt

  4. #4
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    209
    Danke
    0
    Bekam 29 mal "Danke" in 29 Postings

    Standard AW: Hover-Effekt funktioniert nicht

    wie 6 Kacheln ? ich sehe nur 2 und die haben noch verschiedene class namen . Da kann nix gleich sein.

    Da ich nicht weiß wie deine anderen ( ersten 4 ) Kacheln aussehen habe ich deine beiden mal einfach auf gut Glück angepasst. Weiß aber nicht ob du das so meinst https://codepen.io/basti1012/pen/OaWqqp?editors=1100

    Deine Css könnte man aber noch etwas kürzen. Wäre aber sinnvoll wenn man erst den rest kennen würde
    Geändert von basti1012 (13.11.2018 um 23:11 Uhr)
    Mein soforthilfe Forum und Chat

  5. #5
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.314
    Danke
    17
    Bekam 72 mal "Danke" in 70 Postings

    Standard AW: Hover-Effekt funktioniert nicht

    Es gibt dafür einen Code-Tag.

    Code:
    <div class="pro_layer">
    <div class="pro_shadow">
        <a href="legalrape.html">
        <div class="mask3">04 Legal Rape</div>
        <div class="mask32">Die Plakatserie „LEGAL RAPE“ protestiert  gegen das Strafrecht in Bezug auf Vergewaltigung und sexuelle  Gewalt.</div> </a>
    </div>
    </div>
    
    
    <div class="bar_layer">
    <div class="bar_shadow">
        <a href="bar.html">
        <div class="mask5">05 Animation</div></a>
        <div class="mask52">Dieses Video entstand innerhalb eines Kurses für das Programm Cinema 4D.</div> 
    </div>
    </div>
    
    
    CSS:
    
    .pro_layer {
        position: relative;
        /*width:290px;*/
        flex:30%;
        margin-top:-10px;
        height:290px;
        /*margin-left:27.9%;*/
        background-repeat:no-repeat;
        z-index: 0;
        background-image:url(bilder/hochtitel.jpg);
    }
    
    
    .pro_shadow {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.5);
        -moz-transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        opacity: 0;    
    
    
    }
    
    
    .pro_layer:hover .pro_shadow{
        opacity: 1;
    }
    
    
    .bar_layer:hover .bar_shadow{
        opacity: 1;
    }
    
    
    
    
    .bar_layer {
        position: relative;
        /*width:290px;*/
        flex:30%;
        margin-left:10px;
        margin-top:-10px;
        display:flex;
        height:290px;
        /*margin-left:27.9%;*/
        background-image:url(bilder/titel_bar.png);
        background-repeat:no-repeat;
        z-index: 0;
    }
    
    
    ​.bar_shadow {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.5);
        -moz-transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        opacity: 1;    
    
    
    }
    
    .mask3 {
        position:absolute;
        /*width:200px;*/
        width:80%;
        padding-left:10%;
        margin-top:70px;
        text-align:center;
        z-index: 2;
        font-size: 1em;
        font-family: 'Oswald', sans-serif;
    }
    
    
    .mask32 {
        position:absolute;
        width:80%;
        padding-left:10%;
        margin-top: 140px;
        text-align:center;
        /*width:260px;*/
        z-index: 2;
        font-size: 0.5em;
        color:#FFF;
        font-family: 'Quicksand', sans-serif;
    }
    
    .mask5 {
        position:absolute;
        /*width:200px;*/
        width:80%;
        padding-left:10%;
        margin-top:70px;
        text-align:center;
        z-index: 2;
        font-size: 1em;
        font-family: 'Oswald', sans-serif;
    }
    
    
    .mask52 {
        position:absolute;
        width:80%;
        padding-left:10%;
        margin-top: 140px;
        text-align:center;
        /*width:260px;*/
        z-index: 2;
        font-size: 0.5em;
        color:#FFF;
        font-family: 'Quicksand', sans-serif;
    }
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    13.11.2018
    Beiträge
    8
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Hover-Effekt funktioniert nicht

    Das ist der komplette Code. Danke für die Info!
    HTML-Code:
    <div class="image_column_1">
    <div class="wop_layer"><div class="wop_shadow">    <div class="mask">01 Pix it!</div>
      <div class="mask12">Pix it! ist eine interakive Messlatte, die speziell für Mütter und ihre heranwachsenden Kinder bestimmt ist.</div> </a></div> </div>
    
    
    <div class="sb_layer"><div class="sb_shadow">  <a href="storybox.html">    <div class="mask2">02 Storybox</div>
      <div class="mask22">Die Storybox soll lästige Wartezeit, wie zum Beispiel beim Arzt, in ein positives Erlebnis verwandeln.</div> </a></div></div>
    
    
    <div class="take_layer"><div class="take_shadow">    <a href="takeaseat.html">    <div class="mask4">03 Take a Seat!</div>
        <div class="mask42">Die Applikation "Take a Seat!" soll die Platzsuche im Kinosaal vereinfachen.</div> </a></div></div></div>
    
    
    
    
    
    
    <div class="image_column_2">
    <div class="pro_layer"><div class="pro_shadow">    <a href="legalrape.html">    <div class="mask3">04 Legal Rape</div>    <div class="mask32">Die Plakatserie „LEGAL RAPE“ protestiert gegen das Strafrecht in Bezug auf Vergewaltigung und sexuelle Gewalt.</div> </a></div></div>
    <div class="bar_layer"><div class="bar_shadow">    <a href="bar.html">    <div class="mask5">05 Animation</div></a>    <div class="mask52">Dieses Video entstand innerhalb eines Kurses für das Programm Cinema 4D.</div> </div></div>
    <div class="bachelor_layer"><div class="bachelor_shadow">    <div class="mask6">06 Bachelor-Thesis</div>    <div class="mask62">[Inhalt folgt.]Gestaltung eines Handlungsszenarios im Car-Sharing Kontext in Zusammenarbeit mit der Firma Bertrandt.</div></div></div>
    
    
    
    </div>
    Code:
    .image_column_1 {    display: flex;
        margin-top: 80px;
    }
    
    
    .image_column_2 {
        display: flex;
        margin-top: 20px;
    }
    
    
    
    
    
    
    
    
    .wop_layer {
        position: relative;
        /*width:290px;*/
        flex:30%;
        display:flex;
        height:290px;
        /*height:290px;*/
        background-image:url(bilder/titel_wop.jpg);
        background-repeat:no-repeat;
        z-index: 0;
    }
    
    
    
    
    .wop_shadow {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.5);
        -moz-transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        opacity: 0;
    }
    
    
    .wop_layer:hover .wop_shadow{
        opacity: 1;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .sb_layer:hover .sb_shadow{
        opacity: 1;
    }
    
    
    
    
    .sb_layer {
        position: relative;
        /*width:290px;*/
        flex:30%;
        height:290px;
        /*margin-left:27.9%;*/
        margin-left:10px;
        background-image:url(bilder/aaa.jpg);
        background-repeat:no-repeat;
        z-index: 0;
    }
    
    
    .sb_shadow {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.5);
        -moz-transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        opacity: 0;    
    }
    
    
    
    
    
    
    
    
    .take_layer:hover .take_shadow{
        opacity: 1;
    }
    .take_layer {
        position: relative;
        /*width:290px;*/
        flex:30%;
        height:290px;
        margin-left:10px;
        /*margin-left:55.8%;*/
        background-image:url(bilder/titelbild.png);
        background-repeat:no-repeat;
        z-index: 0;
    }
    .take_shadow {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.5);
        -moz-transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        opacity: 0;    
    }
    
    
    
    
    
    
    
    
    
    
    
    
    .pro_layer {
        position: relative;
        /*width:290px;*/
        flex:30%;
        margin-top:-10px;
        height:290px;
        /*margin-left:27.9%;*/
        background-repeat:no-repeat;
        z-index: 0;
        background-image:url(bilder/hochtitel.jpg);
    }
    
    
    .pro_shadow {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.5);
        -moz-transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        opacity: 0;    
    
    
    }
    
    
    .pro_layer:hover .pro_shadow{
        opacity: 1;
    }
    
    
    .bar_layer:hover .bar_shadow{
        opacity: 1;
    }
    
    
    
    
    .bar_layer {
        position: relative;
        /*width:290px;*/
        flex:30%;
        margin-left:10px;
        margin-top:-10px;
        display:flex;
        height:290px;
        /*margin-left:27.9%;*/
        background-image:url(bilder/titel_bar.png);
        background-repeat:no-repeat;
        z-index: 0;
    }
    
    
    ​.bar_shadow {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.5);
        -moz-transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        opacity: 1;    
    
    
    }
    
    
    .bachelor_layer:hover .bachelor_shadow {
        opacity: 1;
    }
    
    
    
    
    .bachelor_layer {
         position: relative;
        /*width:290px;*/
        flex:30%;
        margin-left:10px;
        margin-top:-10px;
        display:flex;
        height:290px;
        /*margin-left:27.9%;*/
        background-image:url(bilder/id_buzz.png);
        background-repeat:no-repeat;
        z-index: 0;
    }
    
    
    ​.bachelor_shadow {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.5);
        -moz-transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
        opacity: 0;
    }
    
    
    .mask {
        position:absolute;
        /*width:200px;*/
        /*heigth:290px;*/
        width:80%;
        padding-left:10%;
        margin-top:70px;
        text-align:center;
        z-index: 2;
        font-size: 1em;
        font-family: 'Oswald', sans-serif;
    }
    
    
    .mask12 {
        position:absolute;
        /*width:260px;*/
        /*heigth:290px;*/
        width:80%;
        padding-left:10%;
        margin-top: 140px;
        text-align:center;
        z-index: 2;
        font-size: 0.5em;
        color:#FFF;
        font-family: 'Quicksand', sans-serif;
    }
    
    
    
    
    .mask2 {
        position:absolute;
        /*width:200px;*/
        width:80%;
        padding-left:10%;
        margin-top:70px;
        text-align:center;
        z-index: 2;
        font-size: 1em;
        font-family: 'Oswald', sans-serif;
    }
    
    
    .mask22 {
        position:absolute;
        width:80%;
        padding-left:10%;
        margin-top: 140px;
        text-align:center;
        /*width:260px;*/
        z-index: 2;
        font-size: 0.5em;
        color:#FFF;
        font-family: 'Quicksand', sans-serif;
    }
    
    
    
    
    
    
    .mask3 {
        position:absolute;
        /*width:200px;*/
        width:80%;
        padding-left:10%;
        margin-top:70px;
        text-align:center;
        z-index: 2;
        font-size: 1em;
        font-family: 'Oswald', sans-serif;
    }
    
    
    .mask32 {
        position:absolute;
        width:80%;
        padding-left:10%;
        margin-top: 140px;
        text-align:center;
        /*width:260px;*/
        z-index: 2;
        font-size: 0.5em;
        color:#FFF;
        font-family: 'Quicksand', sans-serif;
    }
    
    
    
    
    
    
    .mask4 {
        position:absolute;
        /*width:200px;*/
        width:80%;
        padding-left:10%;
        margin-top:70px;
        text-align:center;
        z-index: 2;
        font-size: 1em;
        font-family: 'Oswald', sans-serif;
    }
    
    
    .mask42 {
        position:absolute;
        width:80%;
        padding-left:10%;
        margin-top: 140px;
        text-align:center;
        /*width:260px;*/
        z-index: 2;
        font-size: 0.5em;
        color:#FFF;
        font-family: 'Quicksand', sans-serif;
    }
    
    
    
    
    
    
    .mask5 {
        position:absolute;
        /*width:200px;*/
        width:80%;
        padding-left:10%;
        margin-top:70px;
        text-align:center;
        z-index: 2;
        font-size: 1em;
        font-family: 'Oswald', sans-serif;
    }
    
    
    .mask52 {
        position:absolute;
        width:80%;
        padding-left:10%;
        margin-top: 140px;
        text-align:center;
        /*width:260px;*/
        z-index: 2;
        font-size: 0.5em;
        color:#FFF;
        font-family: 'Quicksand', sans-serif;
    }
    
    
    .mask6 {
        position:absolute;
        /*width:200px;*/
        width:80%;
        padding-left:10%;
        margin-top:70px;
        text-align:center;
        z-index: 2;
        font-size: 1em;
        font-family: 'Oswald', sans-serif;
    }
    
    
    .mask62 {
        position:absolute;
        width:80%;
        padding-left:10%;
        margin-top: 140px;
        text-align:center;
        /*width:260px;*/
        z-index: 2;
        font-size: 0.5em;
        color:#FFF;
        font-family: 'Quicksand', sans-serif;
    }

  7. #7
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    336
    Danke
    0
    Bekam 75 mal "Danke" in 75 Postings

    Standard AW: Hover-Effekt funktioniert nicht

    Da stimmt was nicht... beim kopieren des Eintrages von .bar_shadow erscheint bei mir im Editor ?.bar_shadow. Hast du da irgendwelche Steuerzeichen eingebaut?
    Auf jeden Fall wird anscheinend (zumindest bei mir) diese Klasse .bar_shadow nicht richtig, bzw gar nicht formatiert.
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    13.11.2018
    Beiträge
    8
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Hover-Effekt funktioniert nicht

    ich habe leider selbst nicht viel Ahnung davon.
    Problem ist denke ich, dass shadow nicht als shadow und hover erkannt wird und deshalb permanent angezeigt wird.
    bei mir wird jedoch, was den Code betrifft, auch nichts anderes angezeigt, als das was ich kopiert und eingefügt habe.

  9. #9
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    336
    Danke
    0
    Bekam 75 mal "Danke" in 75 Postings

    Standard AW: Hover-Effekt funktioniert nicht

    Dann probiere mal diesen gesamten Block .bar_shadow (plus eine Zeile davor und dahinter) zu löschen und neu manuell einzufügen.

    - - - Aktualisiert - - -

    ... und dann machst du aus den Formaten für .bar_shadow und .pro_shadow nur einen Block (aus 2 mach 1), denn die beiden Formate sollten gleich sein.
    Und für Beide mach den opacity Wert größer als 0 (zB 0.5)
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  10. #10
    HTML Newbie
    Themenstarter

    Registriert seit
    13.11.2018
    Beiträge
    8
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Hover-Effekt funktioniert nicht

    Dank dir, hat funktioniert auch ohne opacity zu verändern. hab nur aus beiden Formaten eins gemacht.
    funktioniert aber nach wie vor nicht für die sechste Kachel. "bachelor_shadow"


    Nehme alles zurück. Es funktioniert. Vielen Dank für die Hilfe!!!!!!!!!!
    Geändert von sini (14.11.2018 um 00:19 Uhr)

Ähnliche Themen

  1. Hover Effekt bei Boxen nicht unabhängig
    Von Alex1992 im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 05.06.2017, 20:05
  2. z-index bei :hover - funktioniert nicht
    Von Gnomenschuh im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 11.11.2016, 21:07
  3. Antworten: 4
    Letzter Beitrag: 10.06.2015, 14:53
  4. ImageMap Mouseover Effekt funktioniert nicht
    Von user5552 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 29.01.2015, 09:52
  5. Hover funktioniert nicht wie ich es will ;-)
    Von Idrilian im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 28.10.2009, 09:34

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •