0

我有一个图像网格。当有人将鼠标悬停在图像上时，我希望相关文本下拉到该图像所在的行下，然后向下推下一行。

目前，同一行中的其他图像也会下拉。我怎样才能让他们保持静止？

这是我的代码，但你可以在这里看到它的实际效果：http: //jsfiddle.net/VtvG8/

CSS

        #cook-it-raw-container{
            margin: 0px auto; 
            width: 980px; 
            font-family: Dax,Helvetica,Arial,sans-serif; 
            position: relative;
            color: #000;
        }


        #cook-it-raw-container div.sidebar{
            display: inline-block;
            vertical-align: top;
            width: 488px;
        }

        img.chef-pic{
            width: 129px;
            height: 120px;
            display: inline-block;
            margin: 8px;
            cursor: pointer;
        }


        div#sidebar-chefs div.chef-story{
        width: 454px;
        font-size: 13px;
        margin: 10px 0;
        position: relative;
        left: 0;
        display: none;
        }

HTML

        <img class="chef-pic" src="lp_cookitraw_sidebarA_02.jpg" border="0" alt="Albert Adrià" height="118" width="136" />
        <div class="chef-story">
        <h3>Albert Adrià</h3>
        <h4>Tickets, 41°, Barcelona, Spain</h4>
        <p>From working with older brother, Ferran Adrià, at the iconic elBulli restaurant, to maintaining his kingdom of culinary innovation with an ever-expanding empire of new restaurants in Barcelona, Adrià’s bold ideas continue to advance modernist Spanish gastronomy.</p>
        </div>

        <img class="chef-pic" src="lp_cookitraw_sidebarA_14.jpg" border="0" alt="dan barber" height="117" width="135" />
        <div class="chef-story">
        <h3>dan barber</h3>
        <h4>Blue Hill at Stone Barns, New York</h4>
        <p>Chef, writer, educator, and fierce advocate for better choices in sustainable agriculture, Dan Barber is a creative and culinary force in pursuit of nurturing what nurtures us.</p>
        </div>

JQUERY $(document).ready(function(){

            $("img.chef-pic").mouseenter(function(){
                        $(this).next(".chef-story").slideToggle();  
                    });
            $("img.chef-pic").mouseleave(function(){
                        $(this).next(".chef-story").slideToggle();  
                    });

        });

我想过绝对位置，但是下面的行不会下拉；我希望下一行也被推倒。我搜索了 SO 和 Google，但在这种特殊情况下找不到任何帮助。提前感谢您的回复。

4

1 回答 1

4

使用 float:left in

div#sidebar-chefs div.chef-story{}

jsfiddle http://jsfiddle.net/VtvG8/3/

于 2013-10-18T17:40:28.697 回答