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

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 に答える
0

これが私がそれを修正した方法です。divまず、 andpを a でラップする必要があります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できますpwrapper

于 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 に答える