我正在使用D3,并希望在鼠标悬停时使图像模糊。
我在图像后面放置了一个rect元素,并在图像上设置了pointer-events:none,而在rect上设置了pointer-events:all。这可以很好地捕获mouseover事件,但我无法使图像变模糊。
以下是我设置图像及其rect元素的D3代码:
如果我将
我在图像后面放置了一个rect元素,并在图像上设置了pointer-events:none,而在rect上设置了pointer-events:all。这可以很好地捕获mouseover事件,但我无法使图像变模糊。
以下是我设置图像及其rect元素的D3代码:
var newImages = images.enter()
.append("g")
.attr("class", "image");
newImages.append("svg:image")
.attr('class', 'image-body')
.attr('x', 0).attr('y', 20)
.attr("xlink:href", function(d, i) {
return "http://placekitten.com/150/200";
});
newImages.append("rect")
.attr('class', 'image-background')
.attr('x', 0).attr('y', 20);
还有不起作用的CSS:
.image-background {
stroke: black;
stroke-width: 1px;
fill: none;
cursor: pointer;
pointer-events: all;
width: 150px;
height: 200px;
}
.image-background:hover {
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
}
.image-body {
pointer-events:none;
width: 150px;
height: 200px;
}
如果我将
fill: blue
添加到 image-background: hover
中,那么它就可以正常显示。是否可能改为添加模糊滤镜?这是我的 JSFiddle:https://jsfiddle.net/p4bfsvw9/2/。
d3.select('.image-body').transition().duration(2000).style("opacity", 0);
,就像这个例子 https://jsfiddle.net/3bwujq71/。 - Cyril Cherian