僅使用數據屬性CSS隱藏和顯示定義列表項

Question

我試圖隱藏和顯示定義列表內容當鼠標懸停使用DATA ATTRIBUTE和CSS時，如果可能的話。

我想要達到的是當我將鼠標懸停在<dt> ，它將顯示<dd>內容。

看看我的HTML代碼：

<dl>
    <dt data-name="Open"> About Us</dt>
    <dd>We are the best doctors and nurses. Really we are the best among the rest! We are the best! </dd>
    <dt data-name="Open"> Profile</dt>
    <dd>If you are looking for profile you might be wondering if you don't see any profile here.</dd>
    <dt data-name="Open"> Landmarks</dt>
    <dd>You can check our landmark by checking google maps at Kansas City, Missouri! </dd>
    <dt data-name="Open">Testimonials</dt>
    <dd>This company is great! They have cool stuffs inside! The nurses are cute too! </dd>
    <dt data-name="Open"> Contact Us</dt>
    <dd>You can contact us here: <br/>
        634 Woodhaven Ct
        Clarksville, TN 37042-3918
    </dd>
</dl>

這是CSS：

dd {
    margin: 0;
    padding: 20px 0;
    font-size: 14px;
    background: #fbfbfb;
    padding: 10px 50px;
}

dt {
    cursor: pointer;
    font-size : 18px;
    line-height: 23px;
    background: #2ebb98;
    border-bottom: 1px solid #c5c5c5;
    border-top: 1px solid white;
    font-weight: 400;
    color: #fff;
    text-align: left;
    padding: 10px 14px;

}

dt:first-child { border-top: none; }
dt:nth-last-child(2) { border-bottom: none; }

dt[data="open"]{

}

查看JSFIDDLE LINK： http ： //jsfiddle.net/vphuypj4/

我只想使用ONLY CSS和Data-attribute來實現這一點。

Answer 1

您需要默認隱藏dd ，然后使用屬性選擇器 ，以及:hover和相鄰的兄弟選擇器 。 請注意，屬性值Open是區分大小寫的。

dd {
    display:none;
}

dt[data-name="Open"]:hover + dd{
    display:block;

}

http://jsfiddle.net/vphuypj4/2/

Answer 2

 body { width: 330px; margin: 100px auto; text-align: center; font-family: 'Open Sans Light'; background: #555555; } dd { margin: 0; padding: 20px 0; font-size: 14px; background: #fbfbfb; padding: 10px 50px; } dt { cursor: pointer; font-size: 18px; line-height: 23px; background: #2ebb98; border-bottom: 1px solid #c5c5c5; border-top: 1px solid white; font-weight: 400; color: #fff; text-align: left; padding: 10px 14px; } dt:first-child { border-top: none; } dt:nth-last-child(2) { border-bottom: none; } dd { height:0px; padding:0; transition: .5s linear; overflow:hidden; } dt[data-name=Open]:hover + dd { height:40px; padding:20px 0; } 

 <dl> <dt data-name="Open"> About Us</dt> <dd>We are the best doctors and nurses. Really we are the best among the rest! We are the best!</dd> <dt data-name="Open"> Profile</dt> <dd>If you are looking for profile you might be wondering if you don't see any profile here.</dd> <dt data-name="Open"> Landmarks</dt> <dd>You can check our landmark by checking google maps at Kansas City, Missouri!</dd> <dt data-name="Open">Testimonials</dt> <dd>This company is great! They have cool stuffs inside! The nurses are cute too!</dd> <dt data-name="Open"> Contact Us</dt> <dd>You can contact us here: <br/>634 Woodhaven Ct Clarksville, TN 37042-3918</dd> </dl> 

Answer 3

你可以在下拉動畫中添加@keyframes :hover 。

更新小提琴

 body { width: 330px; margin: 10px auto; text-align: center; font-family: 'Open Sans Light'; background: #555555; } dd { display: none; margin: 0; padding: 20px 0; font-size: 14px; background: #fbfbfb; padding: 10px 50px; } dt { cursor: pointer; font-size: 18px; line-height: 23px; background: #2ebb98; border-bottom: 1px solid #c5c5c5; border-top: 1px solid white; font-weight: 400; color: #fff; text-align: left; padding: 10px 14px; } dt:first-child { border-top: none; } dt:nth-last-child(2) { border-bottom: none; } dt:hover + dd { display: block; -webkit-animation: slideDown 0.5s 1; animation: slideDown 0.5s 1; overflow: hidden; } @-webkit-keyframes slideDown { 0% { height: 0; } 100% { height: 50px; } } @keyframes slideDown { 0% { height: 0; } 100% { height: 50px; } } 

 <dl> <dt data-name="Open"> About Us</dt> <dd>We are the best doctors and nurses. Really we are the best among the rest! We are the best!</dd> <dt data-name="Open"> Profile</dt> <dd>If you are looking for profile you might be wondering if you don't see any profile here.</dd> <dt data-name="Open"> Landmarks</dt> <dd>You can check our landmark by checking google maps at Kansas City, Missouri!</dd> <dt data-name="Open">Testimonials</dt> <dd>This company is great! They have cool stuffs inside! The nurses are cute too!</dd> <dt data-name="Open"> Contact Us</dt> <dd>You can contact us here: <br/>634 Woodhaven Ct Clarksville, TN 37042-3918 </dd> </dl> 

Answer 4

對於平滑動畫 ，請勿設置二進制display屬性。

相反，使用transition上的max-height ，由觸發:hover狀態-也轉變填充增加了一個很好的效果了。

使用max-height而不是height是當使用height ，需要設置絕對值，所有項目將始終轉換為（所有項目都被強制為相同的高度）。 使用max-height ，通過將其設置為大於所需最大值的值，項目將僅設置其所需的高度（可以是不同的高度）

使用keyframes的好處是減少了代碼，並且它在mouseover和mouseout上都有動畫效果

 body { width: 330px; margin: 100px auto; text-align: center; font-family: 'Open Sans Light'; background: #555555; } dd { margin: 0; padding: 20px 0; font-size: 14px; background: #fbfbfb; padding: 10px 50px; } dt { cursor: pointer; font-size: 18px; line-height: 23px; background: #2ebb98; border-bottom: 1px solid #c5c5c5; border-top: 1px solid white; font-weight: 400; color: #fff; text-align: left; padding: 10px 14px; } dt:first-child { border-top: none; } dt:nth-last-child(2) { border-bottom: none; } dd { max-height: 0; box-sizing: border-box; padding: 0; overflow: hidden; transition: all 200ms ease-in; } dt[data-name=Open]:hover + dd { max-height: 200px; /* <---can be anything, as long as it exceeds the height of the largest item */ padding: 20px 0; } 

 <dl> <dt data-name="Open"> About Us</dt> <dd>We are the best doctors and nurses. Really we are the best among the rest! We are the best!</dd> <dt data-name="Open"> Profile</dt> <dd>If you are looking for profile you might be wondering if you don't see any profile here.</dd> <dt data-name="Open"> Landmarks</dt> <dd>You can check our landmark by checking google maps at Kansas City, Missouri!</dd> <dt data-name="Open">Testimonials</dt> <dd>This company is great! They have cool stuffs inside! The nurses are cute too!</dd> <dt data-name="Open"> Contact Us</dt> <dd>You can contact us here: <br/>634 Woodhaven Ct Clarksville, TN 37042-3918 </dd> </dl>