javascript - 我正在为 javascript 和 zoom 而苦苦挣扎

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>