Erhöhen und verringern Sie die Breite und Höhe eines Blocks in einer Liste bei Hover

Question

Ich habe eine Liste, die ich Breite und Höhe von jedem Block in 0.5s erhöhen möchte, während Benutzer es schweben. und dann auf die Standardgröße nach der Maus wieder in 0.5s verringern.

mein Problem ist, wie z-index einstellt es der anderen Blöcke auf meiner Liste vor zu zeigen, während Maus, um es schwebt und dann, wenn die Maus, um es in Standardgröße anpassen und legt

dies ist meine html-Liste:

<div id="twelvetour"> 
<nav> 
    <ul class="row"> 
    <li class="col-md-2"> 
     <div class="twelveeffect"> 
      <a href=""> 
       <img class="img-responsive" src="" alt="" /> 
       <p class="text-center">LOREM IPSUM</p> 
       </a> 
     </div> 

    </li> 
    <li class="col-md-2"> 
     <div class="twelveeffect"> 
      <a href=""> 
      <img class="img-responsive" src="" alt="" /> 
      <p class="text-center">LOREM IPSUM</p> 
      </a> 
     </div> 
    </li> 
    <li class="col-md-2"> 
     <div class="twelveeffect"> 
     <a href=""> 
      <img class="img-responsive" src="" alt="" /> 
      <p class="text-center">LOREM IPSUM</p> 
     </a> 
     </div>     
    </li> 
</ul> 
</nav> 
</div> 

und das ist mein jquery:

$("#twelvetour li>div.twelveeffect").hover(
// Mouse Over 
function() { 

    //problem is here 
    $("#twelvetour li").css("zIndex",9); 

    $(this).animate({ width: '130%', height: 400 }, 500); 
}, 
// Mouse Out 
function() { 


    $(this).animate({ width: '100%', height: 250 }, 500); 


}); 

wie ich mein Problem erwähnt, wenn ich z-index wie folgt gesetzt werden dann ändert es alle meine l ist und wieder ist mein schwebender Block-Überlauf hinter seinem Bruder, aber mein Ziel ist es davor zu haben. und es ist sehr wichtig für mich, wenn ein Block schwebt, hat es nicht auf den anderen Platz.

Ich habe einige Wege versucht, einige von ihnen funktioniert in zunehmendem Maße, aber nach Abnahme über die Maus, der Effekt hat nicht gut funktioniert. es fällt plötzlich vor 0,5 Sekunden, es ist Breite hinter seinem Bruder. und mein Problem ist für Blöcke in Zeile nicht Spalten.

schätze jede Hilfe danke. mit

Answer 1

Versuchen:

$(this).parent().css("zIndex",9); 

statt

$("#twelvetour li").css("zIndex",9); 

on line 6 Ihrer js

Answer 2

Ich bin nicht allzu gut in jquery versiert, aber ich hoffe, dass meine Antwort hilfreich sein dennoch. Ich finde es viel einfacher Animationen mit nativem CSS zu erstellen.

Im folgenden Beispiel wird das div seine Breite bei Hover und Contract erweitern, wenn der Benutzer den Cursor vom div entfernt.

Die Eigenschaft "transition" weist den Browser an, Änderungen am Element zu animieren. Sobald wir diese Funktion aktiviert haben, können wir einfach die Eigenschaft "width" bei Hover ändern und sie wird für uns animiert. Dasselbe können wir mit "z-index" machen.

können Sie alternativ transform: scale(1.2, 1); verwenden, um die Breite eines Elements zu erhöhen, ohne dass es sich auf andere Elemente in der Liste auswirkt.

.anAwesomeDiv { 
 
    width: 100px; 
 
    color: white; 
 
    height: 100px; 
 
    background-color: blue; 
 
    transition: 0.5s; 
 
} 
 

 
.anAwesomeDiv:hover { 
 
    width: 200px; 
 
    z-index: 50; 
 
}

<div class="anAwesomeDiv"> 
 
    Look how awesome this div is! 
 
</div>

Answer 3

$("#twelvetour li .twelveeffect").hover(
 
// Mouse Over 
 
function (event) { 
 

 
    //problem is here 
 
$(this).parent().css("zIndex",9); 
 

 
    $(this).stop().animate({ width: '80%', height: 400 }, 500); 
 
}, 
 
// Mouse Out 
 
function (event) { 
 

 

 
    $(this).stop(true,true).animate({ width: '40%', height: 50 }, 500); 
 
    event.stopPropagation(); 
 
    event.preventDefault(); 
 

 
});

.twelveeffect {background:blue;color:white;width:30%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="twelvetour"> 
 
<nav> 
 
    <ul class="row"> 
 
    <li class="col-md-2"> 
 
     <div class="twelveeffect"> 
 
      <a href=""> 
 
       <img class="img-responsive" src="" alt="" /> 
 
       <p class="text-center">LOREM IPSUM</p> 
 
       </a> 
 
     </div> 
 

 
    </li> 
 
    <li class="col-md-2"> 
 
     <div class="twelveeffect"> 
 
      <a href=""> 
 
      <img class="img-responsive" src="" alt="" /> 
 
      <p class="text-center">LOREM IPSUM</p> 
 
      </a> 
 
     </div> 
 
    </li> 
 
    <li class="col-md-2"> 
 
     <div class="twelveeffect"> 
 
     <a href=""> 
 
      <img class="img-responsive" src="" alt="" /> 
 
      <p class="text-center">LOREM IPSUM</p> 
 
     </a> 
 
     </div>     
 
    </li> 
 
</ul> 
 
</nav> 
 
</div>

Answer 4

Vielleicht können Sie mit so etwas wie dies funktionieren:

var li \t \t  = $('#twelvetour li'); 
 
var liWidth \t = li.width(); 
 
var liLeft \t \t = 0; 
 
var liMargin \t = 40; 
 

 
li.each(function(){ 
 
    $(this).css({ 
 
    left : liLeft + 'px' 
 
    }); 
 
    liLeft = liLeft + liWidth + liMargin; 
 
});

a { 
 
    text-decoration: none; 
 
    color: #555; 
 
    font-family: Arial, Helvetica sans-serif; 
 
} 
 

 
/*------------------------------------*/ 
 

 

 
#twelvetour { 
 
    position: relative; 
 
} 
 

 
#twelvetour li { 
 
    position: absolute; 
 
    background: #e7e7e7; 
 
    height: 50px; 
 
    overflow: hidden; 
 
    width: 100px; 
 
    overflow: hidden; 
 
    transition: all 200ms ease; 
 
    padding: 15px; 
 
} 
 

 
#twelvetour li p { 
 
    margin: 0; 
 
} 
 

 
.twelveeffect { 
 
    
 
} 
 

 
#twelvetour li:hover { 
 
    z-index: 3; 
 
    padding: 30px; 
 
    background: #1755ff; 
 
    transform: translate(-15px); 
 
    height: 300px; 
 
    
 
} 
 

 
#twelvetour li:hover a { 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="twelvetour"> 
 
    <nav> 
 
    <ul class="row"> 
 
     <li class="col-md-2"> 
 
      <div class="twelveeffect"> 
 
       <a href=""> 
 
       <img class="img-responsive" src="" alt="" /> 
 
        <p class="text-center">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
 
       </a> 
 
      </div> 
 

 
     </li> 
 
     <li class="col-md-2"> 
 
      <div class="twelveeffect"> 
 
      <a href=""> 
 
       <img class="img-responsive" src="" alt="" /> 
 
       <p class="text-center">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
 
      </a> 
 
      </div> 
 
     </li> 
 
     <li class="col-md-2"> 
 
     <div class="twelveeffect"> 
 
      <a href=""> 
 
      <img class="img-responsive" src="" alt="" /> 
 
      <p class="text-center">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
 
      </a> 
 
     </div>     
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div>