0

如果您访问http://oandg.co.uk.s156312.gridserver.com/#work并选择一个投资组合项目并单击“更多”，您将看到一个图像和一个角落带有小“i”的文本框.

我想这样做，如果您单击小“我”，文本框会消失，如果再次单击它会显示。

我试过了，但它什么也没做：

$(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>

有任何想法吗？

4

2 回答 2

1 
$(function () {
    $(".openBoxButton").click(function () {
        $('#colorbox').fadeIn(1200);
        $.colorbox();
    });

    $('.rsABlock').on('click', 'img.info', function (e) {
        e.preventDefault();
        $('.caption-background').toggleClass('hidden');
    });
});

编辑：只是为了对此添加一些解释，您之前在每次单击“.openBoxButton”类时都添加了一个单击处理程序 - 现在我没有在您的页面中搜索该类，但将其放在该函数之外可以防止事件处理程序被反复添加。

根据评论进行编辑：我使用开发人员工具进行了测试，并且可以正常工作。#colorBox 似乎不起作用 - 可能添加/删除了循环或其他东西。

 $(document).on('click', 'img.info', function (e) {
    e.preventDefault();
    $('.caption-background').toggleClass('hidden');
});
于 2013-04-12T12:48:58.063 回答
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元素上添加一些样式

于 2013-04-12T12:47:03.363 回答