javascript - 悬停时更改 GridView

Question

我想以响应式方式将我的屏幕划分为网格，并想以时尚的方式显示网格元素。

我将 Bootstrap css 用于响应式页面并创建了这样的网格:

http://jsfiddle.net/karimkhan/bc954zLq/2/

代码:

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
            <img src="http://lorempixel.com/1500/600/abstract/1"  />

        </div>
        <div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
            <img src="http://lorempixel.com/1500/600/abstract/2" />

        </div>
        <div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
            <img src="http://lorempixel.com/1500/600/abstract/3" />

        </div>
        <div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
            <img src="http://lorempixel.com/1500/600/abstract/4" />

        </div>
        <div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
            <img src="http://lorempixel.com/1500/600/abstract/4" />

        </div>
        <div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
            <img src="http://lorempixel.com/1500/600/abstract/4" />

        </div>

    </div>
</div>

现在的问题是如何让网格项在悬停时交互

是否可以在 fiddle 中为网格项创建这种样式？

http://metcreative.com/demo_viewer/index.php?theme=santone

Answer 1

this到目前为止我设法做到了。我使用了 jquery 并更改了描述的显示。

$('document').ready(function(){
    $('img').hover(
        function(){
           $(this).siblings('.description').css('display','block');
        },
        function(){
           $(this).siblings('.description').css('display','none');
       }
    );
});

更新:我使用@Claudiu 的回答来完成我的。 this是完整版