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);
}

但是，将鼠标悬停在文本框中，我的输入＆＃39;模糊背景仅出现在第一个帖子上。帖子的重播不会显示模糊的背景。 Plsease帮助。

Answer 1

使用document.querySelectorAll('#blur')获取所有 #blur 元素，document.getElementById()获得第一个ID #blur

的元素

或者如果你想使用jQuery。

模糊功能不适用于所有帖子

1 个答案: