在css中设置类或将鼠标悬停在2个重叠的div上

时间:2016-07-13 09:43:23

标签: javascript jquery html css

是否可以为hover-icon提供一个类,以便图标是triggerinfo?当我悬停它时,图像是灰色的,它会变成彩色,但是当我翻过小图标时,我不想在着色时悬停文本。是否有一种方法将div与triggerinfo类重叠在图像上,但不会留下图像的悬停。像悬停不可见的div并且不会使悬停效果变为彩色?

谢谢!

如果有帮助我可以分享到我的网站的链接,但仅作为消息不是公共帖子。它变得更加直观,我想更好地理解我的意思。



jQuery(document).ready(function() {
  jQuery(".triggerinfo").mouseleave(function() {
    jQuery(this).next(".info").hide();
  });
  jQuery(".triggerinfo").hover(function() {
    jQuery(this).next(".info").toggle("fade");
  });
});

.info {
    display: none;
    padding: 10px;
    background: #fff;
    position: absolute;
    box-sizing: border-box;
    z-index: 1;
}
.triggerinfo {
    display: inline-felx;
    opacity: 0.1;
    position: absolute;
    margin-top: -50px;
    margin-left: 30px;
    z-index: 3;
}
.uk-overlay-icon:before {
    content: "\f0c9";
    position: absolute;
    top: 90%;
    left: 10%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
    font-size: 30px;
    line-height: 1;
    font-family: FontAwesome;
    text-align: center;
    color: #f69c00;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div data-uk-filter="dsgf" data-grid-prepared="true" style="position: absolute; box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; top: 0px; left: 0px; opacity: 1;">
    <div class="uk-panel">
        <div class="uk-panel-teaser">
            <figure class="uk-overlay uk-overlay-hover ">
                <img src="/wp-content/uploads/bilder/projekte/dsf.jpg" class="uk-overlay-grayscale" alt="dfsg">
                <div class="uk-overlay-panel uk-overlay-icon uk-overlay-fade"></div>
                <a class="uk-position-cover" href="/wp-content/plugins/widgetkit/cache/nuding-35281426b204ba8667e05928e60e8a11.jpg" data-lightbox-type="image" data-uk-lightbox="{group:'.wk-1b2a'}" title="dsfg"></a>
            </figure>
        </div>

        <div>
            <div class="triggerinfo">
                sdf
            </div>
            <div class="info">
                <h5>dsfg</h5>
            </div>
        </div>
    </div>
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

Fiddle jsfiddle.net/e8qd8gvf/3/现在可以在我的网站上使用。现在的问题是:在悬停时,img变为彩色并且在左下方的角落中出现一个小图标,现在在img下的触发器应该是这个小图标,因为该图标来自uk-overlay中的css定义 - 图标(来自字体真棒) 我现在不知道如何在这个图标上设置info类。 或者我试图在图标的位置放置一个带有信息类的div而不是触发它,但是当我触发它时,不会显示彩色的效果,所以我认为必须有一种触发div的方法悬停并且不会丢失彩色效果,因此触发器div会触发Info并且同时触发来自img的悬停

PS:抱歉长css!

答案 1 :(得分:0)

<figure>元素用于标记图表,插图,照片,代码示例和类似内容,“可以远离文档的主流而不影响文档的含义”< / em>(http://w3c.github.io/html-reference/figure.html)。
你使用它的方式似乎违反了这个规范。

根据规范和最佳实践进行编码是您自己的责任。

我刚刚选择了您提供的示例:https://jsfiddle.net/e8qd8gvf/4/

我将uk-overlay-icon移到了图的外面,添加了 toggle-info 类并将info框放在其中。

剩下的就是添加一些 CSS

.uk-position-cover { cursor: default; }
.uk-panel-teaser { position: relative; }
.toggle-info {
    display: none;
    cursor: pointer;
    position: absolute; bottom: 20px; left: 20px;
    width: 30px; height: 30px;
}
.toggle-info > .info {
    width: 150px; height: 150px;
    border: 2px solid red;
    position: absolute; bottom: -20px; left: 10px;
    transform: translateY(100%);
}
.toggle-info, .info { display: inline-block !important; }
.toggle-info.hidden, .info.hidden { display: none !important; }

以及将 JS 更改为:

jQuery(document).ready(function() {
    jQuery(".uk-overlay").hover(
        function() {
            jQuery(this).next(".toggle-info").removeClass("hidden");
        },
        function() {
            jQuery(this).next(".toggle-info").addClass("hidden");
        }
    );
    jQuery(".toggle-info").hover(
        function() {
            jQuery(this)
                .removeClass("hidden")
                .children(".info").removeClass("hidden");
        },
        function() {
            jQuery(this)
                .addClass("hidden")
                .children(".info").addClass("hidden");
        }
    );
});


我的解决方案只是向你展示了一种完成任务的方法,而且到目前为止并不“很好”。您需要自己调整并遵守规范。