我正在努力使用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：这是我能用我的新手技能提供的最多的lol

$(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>