[英]Hide and Display Definition List Item using only Data Attribute CSS
I am trying to hide and display the definition list content when the mouse was hovered using DATA ATTRIBUTE and CSS only if possible. 我试图隐藏和显示定义列表内容当鼠标悬停使用DATA ATTRIBUTE和CSS时,如果可能的话。
What I want to attain is when I hover my mouse on the <dt>
it will show the <dd>
content. 我想要达到的是当我将鼠标悬停在
<dt>
,它将显示<dd>
内容。
Check out my HTML codes: 看看我的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>
Here's the CSS: 这是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"]{
}
Check out the JSFIDDLE LINK: http://jsfiddle.net/vphuypj4/ 查看JSFIDDLE LINK: http : //jsfiddle.net/vphuypj4/
I only want to attain this using ONLY CSS and Data-attribute. 我只想使用ONLY CSS和Data-attribute来实现这一点。
You need to hide the dd
s by default, then use an attribute selector , along with :hover
and the adjacent sibling selector . 您需要默认隐藏
dd
,然后使用属性选择器 ,以及:hover
和相邻的兄弟选择器 。 Note that the attribute value Open
is case-sensitive. 请注意,属性值
Open
是区分大小写的。
dd {
display:none;
}
dt[data-name="Open"]:hover + dd{
display:block;
}
http://jsfiddle.net/vphuypj4/2/ http://jsfiddle.net/vphuypj4/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>
You could add @keyframes
for slide down animation on :hover
. 你可以在下拉动画中添加
@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>
For smooth animation , dont set the binary display
property. 对于平滑动画 ,请勿设置二进制
display
属性。
Instead, use a transition
on max-height
, triggered by the :hover
state - also transitioning the padding adds a nice effect too. 相反,使用
transition
上的max-height
,由触发:hover
状态-也转变填充增加了一个很好的效果了。
The reason to use max-height
instead of height
is that when using height
an absolute value needs to be set which all items will always transition to (all items forced to be the same height). 使用
max-height
而不是height
是当使用height
,需要设置绝对值,所有项目将始终转换为(所有项目都被强制为相同的高度)。 Using max-height
, by setting it to a value greater than the maximum required, items will animate to only the height they require (can be different heights) 使用
max-height
,通过将其设置为大于所需最大值的值,项目将仅设置其所需的高度(可以是不同的高度)
The benefit over using keyframes
is the reduced code, and the fact it animates on both mouseover
and mouseout
使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.