是否可以为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;
答案 0 :(得分:0)
Fiddle jsfiddle.net/e8qd8gvf/3/
现在可以在我的网站上使用。现在的问题是:在悬停时,img变为彩色并且在左下方的角落中出现一个小图标,现在在img下的触发器应该是这个小图标,因为该图标来自uk-overlay中的css定义 - 图标(来自字体真棒)
我现在不知道如何在这个图标上设置info类。
或者我试图在图标的位置放置一个带有信息类的div而不是触发它,但是当我触发它时,不会显示彩色的效果,所以我认为必须有一种触发div的方法悬停并且不会丢失彩色效果,因此触发器div会触发Info并且同时触发来自img的悬停
答案 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");
}
);
});
我的解决方案只是向你展示了一种完成任务的方法,而且到目前为止并不“很好”。您需要自己调整并遵守规范。