javascript - 所有帖子上都有模糊功能

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。