Question

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

谢谢！

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

PS：抱歉长css！

Answer 2

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

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

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

2 个答案: