我正在用javascript和缩小尺寸

Question

我想要做的事情是用一行图片嵌入并用JavaScript缩放.prev和.next。缩放本身运行良好，但我无法让邻居玩球。

的代码如下：

$(document).ready(function() { 
    $('.img-zoom').hover(function() { 
     $(this).addClass("transition").parent().prev().addClass("side"); 
     $(this).addClass("transition").parent().next().addClass("side"); 
    }, 
    function() { 
     $(this).removeClass("transition").parent().prev().removeClass("side"); 
     $(this).removeClass("transition").parent().next().removeClass("side"); 
    }); 
}); 

它的工作原理，当我剥CSS下来，那一定是很简单的东西。这里是CSS：

@charset "UTF-8"; 
/* CSS Document */ 

* { 
    padding: 0; 
    margin: 0; 
} 
body { 
    text-align: center; 
} 
li { 
    display: inline; 
    list-style-type: none; 
} 
ul { 
    text-align: center; 
    white-space: nowrap; 
} 
.main_wrapper { 
    width: 98%; 
} 

/* Dock */ 
.dock { 
    margin: auto; 
    list-style-type: none; 
    bottom: 0; 
    position: fixed; 
    left: 20%; 
    right: 20%; 
    width: 60%; 
    border-radius: 5px 5px 0 0; 
    padding-top: 0.5%; 
    padding-bottom: 1.0%; 
    background-color: rgba(171,171,171,0.2); 
    border-top-width: thin; 
    border-right-width: thin; 
    border-bottom-width: thin; 
    border-left-width: thin; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: none; 
    border-left-style: solid; 
    border-top-color: rgba(213,213,213,1); 
    border-right-color: rgba(213,213,213,1); 
    border-bottom-color: rgba(213,213,213,1); 
    border-left-color: rgba(213,213,213,1); 
} 
.dock li img { 
    margin-left: 0.4%; 
    margin-right: 0.4%; 
    box-sizing: border-box; 
    cursor: pointer; 
    background-size: cover !important; 
    background-position: center center !important; 
    background-repeat: no-repeat !important; 
    width: 8%; 
    -webkit-box-reflect: below 1% 
      -webkit-gradient(linear, 
        left top, 
        left bottom, 
        from(transparent), 
        color-stop(0.7, transparent), 
        to(rgba(255,255,255,.5))); 
    -webkit-transition: all 0.5s; 
    -webkit-transform-origin: 50% 100%; 
} 

/* Java Stuff */ 
.img-zoom { 
    -webkit-transition: all .2s ease-in-out; 
     -moz-transition: all .2s ease-in-out; 
     -ms-transition: all .2s ease-in-out; 
     -o-transition: all .2s ease-in-out; 
} 
.transition { 
    -webkit-transform: scale(1.8); 
     -moz-transform: scale(1.8); 
     -o-transform: scale(1.8); 
      transform: scale(1.8); 
} 
.side { 
    -webkit-transform: scale(1.5); 
     -moz-transform: scale(1.5); 
     -o-transform: scale(1.5); 
      transform: scale(1.5); 
} 
.dock li:hover img { 
    margin-right: 1%; 
    margin-left: 2%; 
} 
.dock li:hover + li img, 
.dock li.next img { 
    margin-right: 1%; 
    margin-left: 2%; 
} 

Answer 1

我不确定我能猜出你的html，但这支笔与你有的代码一起工作。 当你不需要时，你可能会去找父母吗？编辑2：再次，你需要给我的HTML给我的确切的解决方案。我基本上猜测你的html布局。

编辑3：神圣废话这是一个整洁的设计。我从中学到了东西。

编辑4：这是最我可以用我的新手技能提供洛尔

$(document).ready(function(){ 
 
$('.img-zoom').hover(function() 
 
{ 
 
$(this).addClass("transition").parent().parent().prev().addClass("side"); 
 
$(this).addClass("transition").parent().parent().next().addClass("side");    
 
}, 
 
function() { 
 
$(this).removeClass("transition").parent().parent().prev().removeClass("side"); 
 
$(this).removeClass("transition").parent().parent().next().removeClass("side"); 
 
} 
 
); 
 
});

@charset "UTF-8"; 
 
/* CSS Document */ 
 
* 
 
{ 
 
padding: 0; 
 
margin: 0; 
 
} 
 
body 
 
{ 
 
    text-align: center; 
 
} 
 
li { 
 
    display: inline; 
 
    list-style-type: none; 
 
} 
 
ul { 
 
    text-align:center; 
 
    white-space:nowrap; 
 
} 
 
.main_wrapper 
 
{ 
 
    width: 98%; 
 
} 
 
/* Dock */ 
 
.dock 
 
{ 
 
margin: auto; 
 
list-style-type: none; 
 
bottom: 0; 
 
position: fixed; 
 
left: 20%; 
 
right: 20%; 
 
width: 60%; 
 
border-radius: 5px 5px 0 0; 
 
padding-top: 0.5%; 
 
padding-bottom: 1.0%; 
 
background-color: rgba(171,171,171,0.2); 
 
border-top-width: thin; 
 
border-right-width: thin; 
 
border-bottom-width: thin; 
 
border-left-width: thin; 
 
border-top-style: solid; 
 
border-right-style: solid; 
 
border-bottom-style: none; 
 
border-left-style: solid; 
 
border-top-color: rgba(213,213,213,1); 
 
border-right-color: rgba(213,213,213,1); 
 
border-bottom-color: rgba(213,213,213,1); 
 
border-left-color: rgba(213,213,213,1); 
 
} 
 
.dock li img 
 
{ 
 
margin-left: 0.4%; 
 
margin-right: 0.4%; 
 
box-sizing: border-box; 
 
cursor: pointer; 
 
background-size: cover !important; 
 
background-position: center center !important; 
 
background-repeat: no-repeat !important; 
 
width: 8%; 
 
-webkit-box-reflect: below 1% 
 
-webkit-gradient(linear, left top, left bottom, from(transparent), 
 
color-stop(0.7, transparent), to(rgba(255,255,255,.5))); 
 
-webkit-transition: all 0.5s; 
 
-webkit-transform-origin: 50% 100%; 
 
} 
 
.img-zoom 
 
{ 
 
-webkit-transition: all .2s ease-in-out; 
 
-moz-transition: all .2s ease-in-out; 
 
-o-transition: all .2s ease-in-out; 
 
-ms-transition: all .2s ease-in-out; 
 
} 
 

 
.img-zoom:hover { 
 
    z-index: 100; 
 
} 
 
.transition { 
 
-webkit-transform: scale(1.8); 
 
-moz-transform: scale(1.8); 
 
-o-transform: scale(1.8); 
 
transform: scale(1.8); 
 
} 
 
.side a img { 
 
-webkit-transform: scale(1.5); 
 
-moz-transform: scale(1.5); 
 
-o-transform: scale(1.5); 
 
transform: scale(1.5); 
 
} 
 
.dock li:hover img 
 
{ 
 
    margin-right: 1%; 
 
    margin-left: 2%; 
 
} 
 
.dock li:hover + li img, 
 
.dock li.next img 
 
{ 
 
    margin-right: 1%; 
 
    margin-left: 2%; 
 
} 
 

 
.fake-img { 
 
    height: 60px; 
 
    width: 60px; 
 
    background-color: black; 
 
} 
 

 
.fake-img-alt { 
 
    height: 60px; 
 
    width: 60px; 
 
    background-color: tomato; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dock"> 
 
    <ul> 
 
    <li> 
 
     <a href=""><img class="img-zoom fake-img" /></a> 
 
    </li> 
 
    <li> 
 
     <a href=""><img class="img-zoom fake-img-alt" /></a> 
 
    </li> 
 
    <li> 
 
     <a href=""><img class="img-zoom fake-img" /></a> 
 
    </li> 
 
    <li> 
 
     <a href=""><img class="img-zoom fake-img-alt" /></a> 
 
    </li> 
 
    <li> 
 
     <a href=""><img class="img-zoom fake-img" /></a> 
 
    </li> 
 
    <li> 
 
     <a href=""><img class="img-zoom fake-img-alt" /></a> 
 
    </li> 
 
    <li> 
 
     <a href=""><img class="img-zoom fake-img" /></a> 
 
    </li> 
 
    <li> 
 
     <a href=""><img class="img-zoom fake-img-alt" /></a> 
 
    </li> 
 
    </ul> 
 
</div>