jQuery + CSS，在悬停时删除其他图像，并具有类似淡入淡出的过渡

jQuery + CSS, remove other images on hover with a fade-like transition

本文关键字：淡入 淡出 图像 CSS 悬停 jQuery 其他 删除      更新时间：2023-09-26

首先，我要完成的是，当您将鼠标悬停在左下角的缩略图上时，其他缩略图将变为黑色。 然而，我现在所拥有的似乎很奇怪，因为其他图像闪回太快并且没有过渡。
其次，当您在缩略图之间过渡时，我希望当您将鼠标悬停在"变黑"的图像上时，图像将返回过渡，就像我在小提琴示例底部一样。

我很抱歉有点混乱，因为它是两件事的组合，但我希望我解释正确。

$('.thumb-box').click(function() {
    var theSRC = $(this).find('img').attr('src');
    $(this).parents('.image-wrapper').find('.main-image').attr('src', theSRC).fadeIn();
});
//Resize image
$('.thumb-box').hover(function(){
        $(this).siblings().find('.child-img').addClass('add-active');
    }, function(){
        $(this).siblings().find('.child-img').removeClass('add-active');
});
$('.main-image').each(function() {
    if ($(this).height() > 550) { 
        $(this).addClass('higher-than-max');
    } else if ($(this).height() <= 550) {
       $(this).addClass('not-higher-than-max');
    }
});
.parent{
    border:1px solid purple;
    height:100%;
    width:80%;
    float:Right;
}
.child{
    border:1px solid red;
    height:100%;
    background:gray;
    text-align:center;
}
.child-img{
    display:inline-block;
    max-width:100%;
    margin:0 auto;
}
.image-wrapper{
    width:100%;
    background:orange;
}
.thumbnails img{
    width:auto;
    height:100%;
    width:100%;
}
.thumbnails{
    width:100px;
    height:100px;
  
}
.thumb-box{
    height:40%;
    width:40%;
    display:inline-block;
    background:black;
}
.higher-than-max{
    max-height:500px;
    width:auto;
}
.not-higher-than-max{
    max-height:100%;
    width:auto;
}
.add-active{
    transition:2s;
    display:none;
}
.boxes{
    height:100px;
    width:100px;
    background:black;
    transition:.5s;
}
.boxes:hover{
    background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    <div class="child">
        <div class="image-wrapper">
            <img src="http://vignette2.wikia.nocookie.net/pokemon/images/b/b1/025Pikachu_XY_anime_3.png/revision/latest?cb=20140902050035" alt="374x333" class="main-image">
            <div class="thumbnails">
                <div class="thumb-box"> 
                    <img src="http://vignette2.wikia.nocookie.net/pokemon/images/b/b1/025Pikachu_XY_anime_3.png/revision/latest?cb=20140902050035" alt="374x333" class="child-img">
                </div>
                <div class="thumb-box"> 
                    <img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg" alt="800x450" class="child-img">
                </div>
                <div class="thumb-box">  
                    <img src="http://vignette3.wikia.nocookie.net/scratchpad/images/0/02/Pikachu.gif/revision/latest?cb=20150217015901" alt="" class="child-img">
                </div>
                <div class="thumb-box">
                    <img src="http://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png" alt="" class="child-img">
                </div>
            </div>
        </div>
    </div>
    <div class="accomplish">
        Image Hover Transition:
        <div class="boxes"></div>
    </div>
</div>

就个人而言，我会使用纯 CSS 使用伪元素来创建黑色覆盖层。

.thumb-box {
  height: 100px;
  position: relative;
  width: 100px;
  // Black overlay
  &:after {
    background-color: #000;
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;// hide overlay to start
    position: absolute;
    top: 0;
    transition: all 250ms ease-in-out;
    width: 100%;
  }
}
// Show all black overlays on hover
.thumbs {
  &:hover {
    .thumb-box:after {
      opacity: 1;
    }
  }
}
// Hide black overlay on individual hovered item
.thumb-box {
  &:hover {
    &:after {
      opacity: 0 !important;
    }
  }
}

演示：http://jsbin.com/lanuni/edit?html,css,output

注意：我不得不在每个图像周围添加一个额外的包装器，因为您无法在<img>标签上创建伪元素（请参阅 CSS ：不向某些元素添加内容后）。

我认为问题是您正在尝试在display: inline-block和display: none之间转换

您无法转换display . 请参阅此问题：显示屏上的过渡：property

首先：它会闪烁b/c 缩略图之间的间隙将迫使鼠标悬停，从而产生闪烁效果。
要解决此问题，您可以使用 setTimeOut（） 在悬停之间延迟。

第二：在显示：

块到显示：无之间过渡效果不佳，改用不透明度，并在缩略图之间放置黑色背景

相关文章：