定位與HTML元素

我有一個div的滑動含有div其中包含兩個其他div S：定位與HTML元素

<div class="container"> 
    <div class="overlay"> 
     <div class="title">Some title</div> 
     <div class="description">Some description</div> 
    </div> 
</div>

我的CSS：

div.container { 
    width: 220px; 
    height: 160px; 
    display: inline-block; 
    position: relative; 
} 

div.container div.overlay { 
    margin: 0; 
    position: absolute; 
    bottom: 0px; 
    width: 220px; 
    padding: 0; 
}

這一點，加上一些其他的，不相關的，CSS ，使第二張照片中顯示的內容。現在我需要製作其他一些CSS，使其像默認的第一張圖片一樣。當你與你的鼠標.container走，.description應該滑入，使其像第二張圖片：

enter image description here

我無法弄清楚如何定位的一切，讓在說明幻燈片。你可以嗎？

這個問題只關於定位和jQuery需要滑動描述 - 顏色和其他佈局不是問題。我正在尋找在所有主流瀏覽器中兼容的解決方案。

編輯：

忘了提，我不知道的.title或.description高度 - 高度設置爲auto，因爲在那裏依賴於文本。

來源

2013-02-26 Keelan

一個更好的標題會很有幫助，但我無法彌補一個。如果你知道一個，請建議編輯！ – Keelan 2013-02-26 16:48:19

這可以用純CSS 3

去做的，這是不可能的有一個高度，從過渡到0它auto使用max-height代替：

.description { 
    max-height: 0; 
    transition: 2s; 
    overflow:hidden; 
} 

div.container div.overlay:hover .description { 
    max-height: 160px; 
}

個

純CSS解決方案：http://jsfiddle.net/DkAKt/1/

此解決方案，即使你不知道你的描述的高度。

CSS 3轉換需要Internet Explorer 10+：http://caniuse.com/#search=transitions。舊版本仍然可以工作，但沒有動畫。

如果你不能沒有在IE 8-9的動畫，你必須使用JavaScript：

jQuery(function($){ 
    $(".container").on('mouseenter', function(){ 
    $(".description", this).stop(1,1).slideDown(); 
    }).on('mouseleave', function(){ 
    $(".description", this).stop(1,1).slideUp(); 
    }) 
    .find('.description').slideUp(0); 
});

純jQuery的解決方案：http://jsfiddle.net/DkAKt/2/

來源

2013-02-26 16:58:41 jantimon

由於您使用的是CSS3，這裏有一些效果 - [像這裏]（http://jsfiddle.net/DkAKt/3/） - 乾杯。 – 2013-02-26 17:36:24

非常感謝！ jQuery解決方案擊中了牛眼。簡短，清晰，工作。大！ – Keelan 2013-02-26 18:18:11

對於純粹的CSS解決方案，您需要將.overlay div稍微向下移動一下。

bottom:-30px;。

然後你不想顯示該部分，所以添加overflow:hidden;到.container。

現在，當您將鼠標懸停在上面時，您需要將其提升。

.overlay:hover 
{ 
    bottom:0; 
}

現在，使其更加美觀，使用transition。

.overlay 
{ 
    bottom:-30px; 
    -webkit-transition:bottom 2s; 
     -moz-transition:bottom 2s; 
      -o-transition:bottom 2s; 
      transition:bottom 2s; 
} 
.overlay:hover 
{ 
    bottom:0; 
}

來源

2013-02-26 16:51:07

對不起，忘了提，我不知道標題/描述的高度... – Keelan 2013-02-26 16:58:55

這應該是非常簡單的，添加以下CSS：

div.container { 
    overflow:hidden; 
} 

div.overlay { 
    bottom:-30px; 
    -webkit-transition:bottom 500ms; 
    -moz-transition:bottom 500ms; 
    -o-transition:bottom 500ms; 
    transition:bottom 500ms; 
} 

div.description { 
    height:30px; 
} 

div.container:hover > div.overlay { 
    bottom:0; 
}

應該這樣做。如果沒有，請刪除>選擇器，它們可能太具體。

來源

2013-02-26 16:51:12 PlantTheIdea

哦，它的血腥地獄它的幻燈片，得到它，我的壞，生病編輯 – PlantTheIdea 2013-02-26 16:52:09

對不起，忘了提，我不知道高度標題/說明... – Keelan 2013-02-26 16:58:33

您需要使用Javascript才能做到這一點，因爲解決方案取決於知道描述的高度。你提到的jQuery - 這裏是該代碼：

$(function slideDescriptionOnHover(){ 
    $('.container').each(function adjustOverlayPosition(){ 
     var $overlay  = $(this).find('.overlay'); 
     var $description = $(this).find('.description'); 

     function slideUp(){ 
      $overlay.animate('bottom', 0); 
     }; 

     function slideDown(){ 
      $overlay.animate('bottom', -$description.height()); 
     }; 

     $(this).hover(slideUp,slideDown); 

     $overlay.css('margin-bottom', -$description.height()); 
    }); 
});

我假設你想要的動畫效果：如果沒有，用css更換animate方法。

一個簡短的指南，以這是怎麼回事：

對於每個.container（它們可能具有不同的高度的描述，取決於有多少文字均含有）...
綁定變量的.overlay，我們將要動畫，並.description，其高度決定我們想要如何動畫。
定義2個函數：一個設置bottom到0，確保.overlay的底部與.container的底部對齊;另一個將.overlay的底部拉低.description的高度。
綁定這兩個函數到jQuery的懸停方法（mouseover和mouseout別名）
......終於，確保描述是隱藏的開始。

您還需要調整規則div.container，使得它包含的屬性：

overflow: hidden

來源

2013-02-26 16:56:54 Barney

定位與HTML元素

回答

相關問題