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;
}
natürlich !! 5 * 20% = 100% oder 4 * 20% + 25% = 105% bedeutet, dass der Platz für die letzte zu klein ist! –
ja ich weiß aber stattdessen möchte ich das Hover Image z-index höher bekommen als die anderen Bilder .. – sam0101
Warum willst du einen höheren z-index nutzlos in diesem Fall! –