2016-07-29 11 views
0

Ich erstelle eine Ruby on Rails App und ich habe ein Bild fünf nebeneinander in einer Zeile ... Ich möchte die Breite des Bildes zu erhöhen, wenn ich schweben über ein Bild ... Jetzt funktioniert die Breite, aber das Problem ist das letzte Bild auf eine andere Seite gehen, wenn ich auf irgendein Bild schweben..Ich habe viel versucht, Z-Index, aber vergeblich ... versuchen, z -Index vom Skript und von CSS mit Position relativ und einige mehr Möglichkeiten, aber immer noch funktioniert jetzt hier ist mein home.html.erb:z-index funktioniert nicht mit Hover Breite Effekt in jquery

<div class="container-fluid" id="width-r"> 
    <%= image_tag("wood1.jpg",class: "this h-h") %> 
    <%= image_tag("wood2.jpg",class: "this") %> 
    <%= image_tag("wood3.jpg",class: "this") %> 
    <%= image_tag("wood4.jpg",class: "this") %> 
    <%= image_tag("wood5.jpg",class: "this") %> 
</div> 
<div class="jumbotron"> 
    <h1 align="center"> Here comes the ads</h1> 
</div> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $(".this").mouseover(function(){ 
     $(this).animate({width: "25%"},"fast"); 
    }); 
    $(".this").mouseout(function(){ 
     $(this).animate({width: "20%"},"fast"); 
    }); 
    }); 
</script> 

und hier ist meine css/SCSS Datei:

@import "bootstrap-sprockets"; 
@import "bootstrap"; 

.navbar { 
    background-color: #fff; 
} 

body { 
    height: 100%; 
} 
.this { 
    width: 20%; 
    float: left; 
    height: 581.55px; 
} 



.navbar-ma { 
    /* remove space between the navbar and the images below */ 
    margin-bottom: 0px; 
} 

.jumbotron { 
    height: 220px; 
    margin-bottom: 0px; 
} 

.container-fluid { 
    padding: 0px; 
} 
+0

natürlich !! 5 * 20% = 100% oder 4 * 20% + 25% = 105% bedeutet, dass der Platz für die letzte zu klein ist! –

+0

ja ich weiß aber stattdessen möchte ich das Hover Image z-index höher bekommen als die anderen Bilder .. – sam0101

+0

Warum willst du einen höheren z-index nutzlos in diesem Fall! –

Antwort

0

z-index funktioniert nur Elemente mit, die einen position Stil haben, das heißt position: relative; position: absolute; usw.

hinzufügen position: relative; zu .this

.this { 
    width: 20%; 
    float: left; 
    height: 581.55px; 
    position: relative; 
    z-index: 0; 
    transition: 0.25s; 
} 
.this:hover{ 
    width: 25%; 
    z-index: 1; 
} 

Sie müssen nicht für diese JS verwenden. die :hover funktioniert, wenn Sie die HTML-Objekt schweben über (transition: 0.25s; setzt die Animation in CSS)

+0

Bitte! Das ist keine Antwort auf das OP-Problem! Vielleicht ein Kommentar! –

+0

Ich versuchte mit dem auch, aber nicht funktioniert – sam0101

+0

@ sam0101 siehe letzte Änderung – 4lackof

0

ich mein Problem nur gelöst und wollen, dass es für alle haben das gleiche Problem hier setzen ..

I legt meine Bilder im Inneren ein weiteres div und fügen sie einige CSS (einige css es von den Jungs, die versucht, mich in dieser Frage zu helfen) ... hier ist Updates meines Codes

home.html.erb:

<div class="container-fluid" id="width-r"> 
    <div class="this"> 
    <%= image_tag("wood1.jpg", class: "inside") %> 
    </div> 
    <div class="this"> 
    <%= image_tag("wood2.jpg",class: "inside") %> 
    </div> 
    <div class="this"> 
    <%= image_tag("wood3.jpg", class: "inside") %> 
    </div> 
    <div class="this"> 
    <%= image_tag("wood4.jpg", class: "inside") %> 
    </div> 
    <div class="this"> 
    <%= image_tag("wood5.jpg", class: "inside") %> 
    </div> 

</div> 
<div class="jumbotron"> 
<h1 align="center"> Here come the ads</h1> 
</div> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".inside").mouseover(function(){ 
     $(this).css('z-index', '100'); 
     $(this).animate({width: "105%"},"slow"); 
     }); 
     $(".inside").mouseout(function(){ 
     $(this).css("z-index", ''); 
     $(this).animate({width: "100%"},"slow"); 
     }); 
    }); 
</script> 

und hier ist mein css/scss (Sie können den css Weg auch benutzen, indem Sie den css Code unten auskommentieren und die js von der homepage entfernen):

@import "bootstrap-sprockets"; 
@import "bootstrap"; 

.navbar { 
    background-color: #fff; 
} 

body { 
    height: 100%; 
} 

.width-r { 
    position: relative; 
} 

.this { 
    width: 20%; 
    float: left; 
    height: 581.55px; 
    position: relative; 

} 
.inside { 
    width: 100%; 

    float: left; 
    height: 581.55px; 
    position: absolute; 
    transition: 0.5s; 
} 
/* 
.inside:hover { 

    z-index:100; 
    width: 110%; 
} 
*/ 
.navbar-ma { 
    /* remove space between the navbar and the images below */ 
    margin-bottom: 0px; 
} 

.jumbotron { 
    height: 220px; 
    margin-bottom: 0px; 
    z-index: 0; 
} 

.container-fluid { 
    padding: 0px; 
} 
Verwandte Themen