我可以做一个元素看不见徘徊？ [英] Can I make an element invisible to hovers?

问题描述

我有，有一个星暴样的效果（PNG透明背景），我想了一系列的IMGS覆盖，因为它们盘旋的div;我必须做出大以包含图像的股利，但随后在检测上的图像的悬停的方式获得。 （我把它们都作为背景图像，使他们通过一个高分辨率的CSS mediaquery加载）

每个'形象'是一系列元素貌似现在这种权利：

 ＆LT; D​​IV CLASS =部分＆GT;
    ＆LT; D​​IV CLASS =星暴＆GT;＆LT; / DIV＆GT;
    ＆LT; A HREF =链接＆GT;
        DIV CLASS =形象＆GT;
            ＆LT; D​​IV CLASS =非悬停＆GT;＆LT; / DIV＆GT;
            ＆LT; D​​IV CLASS =悬停＆GT;＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆所述p为H.;字幕＆下; / P＆GT;
    ＆所述; / A＆GT;
＆LT; / DIV＆GT;
 

JS是这样的。

  $（'一节）。悬停（
    功能（）{
        $（'扬声器.hover。'）隐藏（）。
        $（本）.find（'。非悬停'）addClass（'焦点'）;
        。$（本）.find（'徘徊'）停止（）显示（）动画（{不透明：1.0}，1000）;
    }，
    功能（）{
        。$（本）.find（'徘徊'）停止（）动画（{不透明：0.0}，0）;
        $（本）.find（'非徘徊。'）removeClass移除（'焦点'）。
    }
）;
 

我的问题是在哪里放.starbursts，如何处理他们，让他们在前面，用在徘徊图像的顶部的背景图片，但在盘旋在他们的方式没有得到。我不知道这甚至有可能，但希望能有一种方法。让他们分开，因为我想以不同的动画效果它们。

解决方案

您可以使用CSS的指针事件属性：

  

CSS属性指针事件允许作者在什么情况下（如果有的话）一个特定的图形元素能够成为鼠标事件的目标控制。

  .starbursts {
   指针事件：无
}
 

I have a div that has a starburst kind of effect (transparent png background) that I want to overlay on a series of imgs as they are hovered; I have to make the div large to contain the image, but then it gets in the way of detecting the hovers on the images. (I have them all as background images so they're loaded via a high resolution css mediaquery)

Each 'image' is a series of elements looks like this right now:

<div class="section">
    <div class="starburst"></div>
    <a href="link">
        div class="image">
            <div class="non-hover"></div>
            <div class="hover"></div>
        </div>
        <p>Caption</p>
    </a>
</div>

JS is like this

$('.section a').hover(
    function () {
        $('.speaker .hover').hide();
        $(this).find('.non-hover').addClass('focus');
        $(this).find('.hover').stop().show().animate({opacity:1.0}, 1000);
    },
    function () {
        $(this).find('.hover').stop().animate({opacity:0.0}, 0);
        $(this).find('.non-hover').removeClass('focus');
    }
);

My question is where to put the .starbursts, how to deal with them so that they are in front, with their bg image on top of the hovered image, but doesn't get in the way of hovering on them. I'm not sure this is even possible but hoping there's a way. Have them separated because I want to animate them on differently.

解决方案

You can use the CSS pointer-events property:

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.

.starbursts {
   pointer-events: none
}

这篇关于我可以做一个元素看不见徘徊？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！