1

您好，我正在尝试获取图片悬停的 div 并在其下方显示文本（其中包含图像的 div 需要彼此相邻） 目前在

我试图显示的标签只显示在 div 旁边。有谁知道如何解决这一问题？

这是CSS 

.art-thumb{
margin-left:30px;
margin-top:15px;
float:left;
position:relative;
}
.artist-statement{
height:2em;
width:200px;
display:none;
}

这是 html.erb

<div class = "projects">
<%@followers.each do |display|%>
    <%=display.name %>
<% end %>
<%= render 'follow_form' %>

<%@galleries.each do |gallery|%>
    <%if gallery.art_works.first && gallery.art_works.first.art.url %>
    <div class = "art-thumb">
        <p><%= gallery.title %></p>
        <%= link_to image_tag(gallery.art_works.first.art.thumb.url), gallery_path(gallery) %>     
    </div>
    <div class="artist-statement">
        <%= gallery.artist_statement %>
    </div>
    <%end%>
<%end%>

这是js

$('document').ready(function(){
//move the thumbnail up
$('.art-thumb').hover(
    function(){
        console.log('it works!');
        $(this).stop().animate({bottom:'50px'},function(){
           $(this).next('.artist-statement').slideDown();
        });
    },
    function(){
        $(this).stop().animate({bottom:'0'},function(){
           $(this).next('.artist-statement').slideUp();
        });
    }
    );
            console.log('it knows it should move');

 });

这是 js 小提琴 http://jsfiddle.net/veHq3/15/

4

3 回答 3

0

这是我修复它的方法。首先，您需要将divand包裹p在一个wrapper. 放在float: left那个包装纸里，一切都会好起来的

<div class="wrapper">
    <div class="art-thumb"></div>
    <p class="artist-statement">artist statement1</p>
</div>
<div class="wrapper">
    <div class="art-thumb"></div>
    <p class="artist-statement">artist statement2</p>
</div>
<div class="wrapper">
    <div class="art-thumb"></div>
    <p class="artist-statement">artist statement3</p>
</div>

.art-thumb {
    height:60px;
    width:60px;
    background-color:red;

    margin:35px;
}
.artist-statement {
    display:none;
    position: relative;

}

.wrapper {
    float: left;
}

现在你只需要稍微修改一下就可以使你的div和p排列在里面了wrapper

于 2013-07-15T01:38:23.080 回答
0

将每个拇指/标题对包装在一个 div 中。

HTML

<div class="wrapper">
    <div class="art-thumb">
    </div>
    <p class="artist-statement">artist statement2</p>
</div>

<div class="wrapper">
    <div class="art-thumb">
    </div>
    <p class="artist-statement">artist statement2</p>
</div>

<div class="wrapper">
    <div class="art-thumb">
    </div>
    <p class="artist-statement">artist statement2</p>
</div>

CSS

将边距添加到包装元素：

.wrapper{ height: 60px; width: 60px; position: relative; display: inline-block; margin-right: 10px;}
.art-thumb{height:60px;width:60px;background-color:red;position: absolute}
.artist-statement{ display: none; position: absolute; bottom: 0; z-index: -1}

JS

更新了 Javascript（注意：如果您希望框的移动和字幕的显示同步，请在字幕元素上与缩略图的动画同时运行 slideUp()，而不是作为完成后的回调函数。

$('document').ready(function(){
    //move the thumbnail up
    $('.art-thumb').hover(
        function(){
            $(this).stop().animate({bottom:'50px'},function(){
                $(this).next('.artist-statement').slideDown();
            });
        },
        function(){
            $(this).stop().animate({bottom:'0'},function(){
                  $(this).next('.artist-statement').slideUp();
            });
        }
        );

});

这是一个更新的小提琴：

http://jsfiddle.net/veHq3/51/

于 2013-07-15T01:38:38.617 回答
0

HTML

<div class="container">
    <div class="art-thumb"></div>
    <p class="artist-statement">artist statement1</p>
</div>

<div class="container">
    <div class="art-thumb"></div>
    <p class="artist-statement">artist statement2</p>
</div>

<div class="container">
    <div class="art-thumb"></div>
    <p class="artist-statement">artist statement3</p>
</div>

CSS

.container
{
    float:left;
}

.art-thumb
{
    height:60px;
    width:60px;
    background-color:red;
    margin:35px 35px 10px;
}

.artist-statement
{
    display:none;
    text-align: center;
}

jsFiddle 演示：http: //jsfiddle.net/leniel/veHq3/57/

于 2013-07-15T01:52:50.103 回答