Question

你好我刚来这里遇到麻烦，我不知道我在做什么，希望得到一些帮助。所以我要做的是将此按钮放在带有红色边框的框内，并仍设法打开内容框。

我的目标是什么： http://i.imgur.com/s6Px9a1.png

HTML：

    <div class="grid-thumb">
    <a href="#"><img src="http://placehold.it/350x150" alt="" /></a>

    <button class="grid-thumb-link">Click to open Content box</button>

  </div>
  <div class="grid-content">Success
    <a href="#" class="close-gridder">X
    </a>
  </div>

JS：

$(window).load(function() {

  $(".grid-thumb-link").click(function(event) {

    event.preventDefault();

    $(this).addClass('active');
    $(this).parent('.grid-thumb').siblings().find('.grid-thumb-link').removeClass('active');
    $(this).parent('.grid-thumb').next('.grid-content').show();
    $(this).parent('.grid-thumb').siblings().next('.grid-content').hide();

    $('html,body').animate({
        scrollTop: $(this).offset().top
      },
      'slow');

  });

  $('.close-gridder').click(function() {
    $('.grid-content').removeClass('gridcontshow').hide();
    $(".grid-thumb-link").removeClass('active');

  });

});

CSS

button.grid-thumb-link {
  display: block;
  margin: 0 auto;
}

这是一个演示 http://jsfiddle.net/5gcz5tq6/

Answer 1

尝试这种方式：

1）

button.grid-thumb-link { 
 display: block; 
 margin: -30px auto 0 auto; 
 position:relative;
}

2）

.grid-thumb:hover button.grid-thumb-link { 
 display: block;  
 margin: -30px auto 0 auto;
}

3）添加课程

.grid-thumb a{
 display: block;
}

扩展网格 - 定位按钮

1 个答案: