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。首先从http://code.jquery.com/jquery-1.10.2.min.js下载jQuery 然后。

$('.yourImage').mouseover(function(){ //'.yourImage' are the last three images in your case.
    $('.homepic1').addClass('blur'); //'.homepic1' is the class of first image in your case
});

.addClass（'blur'），将CSS中的类'blur'添加到'.homepic1'元素中，只要您的鼠标悬停在三个图像中的任意一个上。

Answer 2

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

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

使用css或javascript添加效果。

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

2 个答案: