html - 将鼠标悬停在一个 div 上会触发另一个 div

Question

我如何将鼠标悬停在图像上，然后在 css 中模糊其背后的背景图像？我现在设置它的方式是悬停时背景图像模糊。 这是我的 css:

.blur img {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.blur img:hover {
    -webkit-filter: blur(5px);
}
.wrapper{
    width:900x;
    height: 100px; 
    position: absolute; 
    top: 2400px;
    z-index: 50;
}
.logo{
    postion: absolute;
    margin: 0 auto;
    top: 2420px;
    z-index: 50;
    left: 400px;
}

html:

<div class="blur"><img src="/homepic1.jpg"></div>//This is the image I want blurred 

<div class="wrapper">
    <div class="row">
        <div class="span12 pagination-centered">
            <img src="/transparanetsnu.png">//How do I hover over any of these images to trigger a blur on "homepic1.jpg"
        </div>
        <div class="span4 offset3">
            <div class="box2"><img src="/greek_logo.gif"></div>
        </div>
    <div class="logo"><img src="/UM-Main-Logo-Maroon.gif">
</div>

Answer 1

我认为最好的方法是使用 JQuery。所有图像并在每次用户将鼠标悬停在一张图像上时向它们添加“模糊”类，但您应该从不需要的图像中删除该类。

$('.img1').mouseover(function(){
    $('img').addClass('blur');
    $('.img1').removeClass('blur');
});

使用 css 或 javascript 添加效果。