所有帖子上的模糊功能

Question

HTML代码是

{{> addPost}}

    {{#each post}}
        {{> postItem}}

    {{/each}}
</template>

<template name="postItem" >

    <div class='container'>

    <div class='col-lg-9'>
    <div class='well'>
    <span id='blur'>
    <h4><img src='{{userImage}}' class='img-responsive img-circle pull-left' height='100' width='100'/>{{name}}</h4>
    <i>Asked by {{postedBy}} on {{createdAt}}</i>
    </span>
    </div>
    </div>

而Javascript代码是：这里myinput是用户可以在其中发布的文本框的ID。

'mouseover #myinput':function(event){
            event.preventDefault;
            var containerElement = document.getElementById('blur');
            containerElement.setAttribute('class', 'blur');
        },
        'mouseout #myinput':function(event){
            event.preventDefault;
            var containerElement = document.getElementById('blur');
            containerElement.setAttribute('class', null);
        }

并且CSS代码是：

.blur   {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}

但是将鼠标悬停在ID为'myinput'的文本框上时，模糊背景只会显示在第一篇文章上。其余文章不会显示背景模糊。请帮助。

Answer 1

使用document.querySelectorAll('#blur')获得所有

＃blur元素，使用document.getElementById()获得ID为＃blur

的第一个元素或根据需要使用jQuery。