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

我想要达到的是当我将鼠标悬停在

上时,它将显示

内容。

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来实现这一点。

4 个解决方案

#1

You need to hide the dds by default, then use an attribute selector, along with :hover and the adjacent sibling selector. Note that the attribute value Open is case-sensitive.

您需要默认隐藏dds,然后使用属性选择器,以及:hover和相邻的兄弟选择器。请注意,属性值Open是区分大小写的。

dd {
    display:none;
}

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

}

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

#2

You could add @keyframes for slide down animation on :hover.

你可以在下拉动画中添加@keyframes:hover。

Updated Fiddle

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

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>

#4

For smooth animation, dont set the binary display property.

对于平滑动画,请勿设置二进制显示属性。

Instead, use a transition on max-height, triggered by the :hover state - also transitioning the padding adds a nice effect too.

相反,使用由:悬停状态触发的最大高度转换 - 同样转换填充也会产生很好的效果。

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). 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而不是height的原因是当使用height时,需要设置一个绝对值,所有项目将始终转换为(所有项目都被强制为相同的高度)。使用max-height,通过将其设置为大于所需最大值的值,项目将仅设置其所需的高度(可以是不同的高度)

The benefit over using keyframes is the reduced code, and the fact it animates on both mouseover and 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>

#1