我试图隐藏并显示鼠标悬停时的定义列表内容，如果可能的话只使用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来实现这一点。
答案 0 :(得分：3)
默认情况下，您需要隐藏dd，然后使用attribute selector，:hover和adjacent sibling selector。请注意，属性值Open区分大小写。
dd {
display:none;
}
dt[data-name="Open"]:hover + dd{
display:block;
}
答案 1 :(得分：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>
答案 2 :(得分：2)
您可以在@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>
答案 3 :(得分：2)
对于平滑动画，请勿设置二进制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>