仅使用数据属性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>