如果您转到http://oandg.co.uk.s156312.gridserver.com/#work并选择一个投资组合项目,然后点击“更多”,您会看到一个图片和一个文字框,角落里有一点“我”。
我想这样做,如果你点击那个小'我'文本框就会消失,如果再点击它就会显示出来。
我试过了,但它没有做任何事情:
$(function() {
$(".openBoxButton").click(function() {
$('#colorbox').fadeIn(1200);
$.colorbox();
$('.rsABlock img.info').click(function(e) {
e.preventDefault();
$('.caption-background').toggleClass('hidden');
});
});
});
HTML:
<!-- Slide One -->
<div id="simple-slider-one" class="royalSlider rsDefault" style="width: 100%;">
<a class="rsImg" href="images/Froosh/froosh1.jpg">
<div class="rsABlock">
<img src="images/info.svg" alt="" class="info">
<div class="caption-background">
<h4>What we did for them</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem distinctio deserunt nostrum illum dolor obcaecati eaque ipsam! Distinctio, ipsa accusamus saepe temporibus ex pariatur possimus quidem sapiente obcaecati labore iusto.</p>
</div>
</div>
</a>
<a class="rsImg" href="images/Froosh/froosh2.jpg">
<div class="rsABlock">
<img src="images/info.svg" alt="" class="info">
<div class="caption-background">
<h4>What we did for them</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem distinctio deserunt nostrum illum dolor obcaecati eaque ipsam! Distinctio, ipsa accusamus saepe temporibus ex pariatur possimus quidem sapiente obcaecati labore iusto.</p>
</div>
</div>
</a>
有什么想法吗?
答案 0 :(得分:1)
$(function () {
$(".openBoxButton").click(function () {
$('#colorbox').fadeIn(1200);
$.colorbox();
});
$('.rsABlock').on('click', 'img.info', function (e) {
e.preventDefault();
$('.caption-background').toggleClass('hidden');
});
});
编辑:只是为了添加一些解释,您之前在“.openBoxButton”类的每次点击中都添加了一个点击处理程序 - 现在我没有在您的页面中搜索该类,但将其放在该函数之外会阻止事件hanlder被反复添加。
基于评论编辑:我使用开发人员工具进行了测试,但它确实有效。 #colorBox似乎不起作用 - 可能添加/删除循环或其他东西。
$(document).on('click', 'img.info', function (e) {
e.preventDefault();
$('.caption-background').toggleClass('hidden');
});
答案 1 :(得分:0)
是的......你可以用CSS做到这一点:
<!-- HTML -->
<div class="container">
<img src="http://placekitten.com/285/275" class="portfolio" alt="">
<div class="mask">
<h2>Froosh</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem nostrum porro iste excepturi vel ducimus cumque minima rem voluptates cum!</p>
</div>
</div>
/* CSS */
.container {
/* Some width */
width: 200px;
display: inline-block;
position: relative;
border: 3px solid #ccc;
}
.container img {
display: block;
width: 100%;
}
.container .mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
/* some color */
background: rgba(255, 255, 255, 0.5);
opacity: 0;
-webkit-transition: all 0.3s ease-out;
/* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 0.3s ease-out;
/* Firefox 4-15 */
-o-transition: all 0.3s ease-out;
/* Opera 10.50–12.00 */
transition: all 0.3s ease-out;
/* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
.container:hover .mask {
opacity: 1;
}
有一个JsFiddle:http://jsfiddle.net/KaCHN/1/
您可以在.mask
元素上添加一些样式