所有帖子的模糊功能

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 是用户可以 post.

的文本框的 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' 的文本框上时，模糊背景仅出现在 post 的第一个 post.Rest 上，不会显示模糊背景。请帮忙。

Answer 1

使用document.querySelectorAll('#blur')获取所有#blur元素，使用document.getElementById()获取id为#blur[=的第一个元素18=]

或根据需要使用 jQuery。

所有帖子的模糊功能

Blur function on all posts

javascript

dom-events

meteor

meteor-blaze