Скрыть и отобразить элемент списка определений, используя только атрибут данных CSS

Question

Скрыть и отобразить элемент списка определений, используя только атрибут данных CSS

Я пытаюсь скрыть и отобразить содержимое списка определений, когда мышь была наведена с использованием 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: http://jsfiddle.net/vphuypj4/

Я только хочу достичь этого, используя ТОЛЬКО CSS и Data-attribute.

2

html css custom-data-attribute

Источник

user4279017 07 янв '15 в 09:19

4 ответа

Другие вопросы по тегам html css custom-data-attribute

user1901857 07 янв '15 в 09:22 2015-01-07 09:22 · Answer 1 · 2015-01-07 09:22

Вам нужно скрыть dds по умолчанию, затем используйте селектор атрибута вместе с :hover и соседний селектор брата. Обратите внимание, что значение атрибута Open чувствителен к регистру.

dd {
    display:none;
}

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

}

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

user404335 07 янв '15 в 09:32 2015-01-07 09:32 · Answer 2 · 2015-01-07 09:32

Для плавной анимации не устанавливайте бинарный файл display имущество.

Вместо этого используйте transition на max-height вызвано :hover состояние - также изменение padding добавляет приятный эффект тоже.

Причина использования 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>

user4025556 07 янв '15 в 09:23 2015-01-07 09:23 · Answer 3 · 2015-01-07 09:23

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>

user3905567 07 янв '15 в 09:27 2015-01-07 09:27 · Answer 4 · 2015-01-07 09:27

Вы могли бы добавить @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>