Jquery滑动面板移动相邻的图片向下

Jquery slide panel moves adjacent picture down

本文关键字：移动 Jquery      更新时间：2023-09-26

我使用Jquery幻灯片面板的一些图像。我遇到的问题是，当幻灯片面板显示它移动旁边的图像下来。我不希望这种事发生。是否有一种方法可以显示滑块面板，但不移动旁边的图像?有类似的问题，但在网站上没有答案。

这是没有图像文件的jsfiddle: https://jsfiddle.net/amyspod/q2obknwt/

下面是我的代码:

<div class="images">
          <div class="image1">
            <img class="myImg" id="heroimage" src="heros website.jpg" alt="www.heros.com" width="300" height="200">
            <div class="panel" id="hero">PSD to responsive website</div>
          </div>
          <div class="image2">
            <img class="myImg" id="oakimage" src="oak website.jpg" alt="www.oak.com" width="300" height="200">
            <div class="panel" id="oak">PSD to responsive website 2</div>
          </div>
        </div>

.myImg {
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    margin-top: 40px;
  }
  /*slider panels*/
.image1, .image2{
  display:inline-block;
    margin-left: 10%;
}
.panel {
    padding: 10px;
    text-align: center;
    background-color: white;
    font-size: 20px;
    display: none;
}

$(document).ready(function(){
function slidepanel(x,y){
    $(x).mouseenter(function(){
        $(y).slideToggle("slow");
    });
     $(x).mouseleave(function(){
        $(y).slideToggle("slow");
    });
}
slidepanel("#oakimage", "#oak");
slidepanel("#heroimage", "#hero");
});

内联(或内联块)元素与基线对齐。试试这个:

.image1,
.image2 {
    ...
    vertical-align: top;
}

还要注意，CSS类在设计上是可重用的。我认为在这种情况下没有理由使用两个，它们应该具有描述其使用或功能的语义值。

相关文章：