Как сделать <'details'> выпадающим при наведении мыши

Question

Кто-нибудь может мне помочь, как сделать детали раскрывающегося при наведении мыши с помощью CSS

Это HTML-код

<details>
  <summary>Sample</summary>

Details of sample
</details>

Мне нужен код CSS, чтобы он выпадал, когда на него наведена мышь, может кто-нибудь помочь мне в этом?

Answer 1

Попробуй это:

HTML:

<div id="summary">Sample</div>
<div id="detail">Detail of theis summary</div>

CSS:

#summary {
    background: #666;
    width: 100px;
    color: #fff;
}

#summary:hover {
    cursor: pointer;
    color: #fff200;
}

#detail {
    width: 300px;
    height: 300px;
    background: #fff200;
    display: none;
}

JavaScript:

$(document).ready( function() {
    $('#summary').hover( function() {
        $('#detail').toggle();
    });
});

Смотрите мой jsfidle здесь

Answer 2

Решение tepkenvannkorn работает, но вам не нужно использовать JavaScript в этом случае.

HTML

<div id="summary">Sample</div>
<div id="detail">Detail of this summary</div>

(обратите внимание, что резюме предшествует деталям)

CSS

#summary:hover + #detail, #detail:hover {
  display: block;
}
#detail {
  display: none;
}

http://jsfiddle.net/vSsc5/1/

Answer 3

Похоже, это немного устарело, но похоже, что оба ответа не касались непосредственно HTML5. details / summary как ты и просил. К сожалению, в CSS нет способа сделать это - вы можете сделать это для браузеров, которые не поддерживают details / summary, но не для браузеров, которые поддерживают его.

К сожалению, единственный способ заставить эту работу работать через браузер - это JavaScript. Вы добавляете open атрибут на mouseover а затем удалить его на mouseout, Вот фрагмент (извините за jQuery):

$(function() {
  $('details').on('mouseover', function() {
    $(this).attr('open', true);
  }).on('mouseout', function() {
    $(this).attr('open', false);
  })
});

Это не работает для пользователей клавиатуры; Вы должны немного подумать. details элемент нуждается в tabindex="0" атрибут, так что к нему можно перейти, и вам нужно слушать оба mouseover / mouseout а также focus / blur, К сожалению, Chrome (по крайней мере, v37) удаляет summary элемент из порядка табуляции, когда details имеет tabindex и даже добавив tabindex в summary не исправить это. Weird.

Вот живой пример: http://codepen.io/pdaoust/pen/fHybA

Answer 4

Вот решение (вариант Theriot), более близкое к первоначальному вопросу "Как сделать <'details'> выпадающим при наведении мыши". Смотрите комментарии внутри HTML.

HTML

  <details open>
      <summary>Title</summary>
      <div id="uniqueDetailsDiv">
Be sure to set the attribute 'open' within the 'details' element, and use a 'div' or another tag
to support a unique 'class' or 'id' name such as 'uniqueDetailsDiv'
      </div>
  </details>

CSS

#uniqueDetailsDiv
  {display: none;}
details:hover #uniqueDetailsDiv
  {display: block;}

У этого решения есть два недостатка:

1. вы не можете постоянно открывать "детали" (наведением мыши не является mousedown),
2. это противоречит поведению "щелчка" в сводке (один щелчок навсегда скрывает детали, дважды щелкните, чтобы восстановить поведение "зависания")

но вопрос не требовал ничего особенного с "щелчком" (своего рода альтернативой ему). Эта альтернатива может быть полезна на настольных компьютерах. С устройствами с сенсорным экраном обычное поведение "деталей", вероятно, лучше.

Answer 5

У меня есть список сроков, который также реализован с подробностями.

Я хочу, чтобы мышь перемещалась по нему, чтобы автоматически расширять и закрывать его, когда он перемещается в несвязанную область.

Вот мой код

Answer 6

      document.addEventListener('DOMContentLoaded', function() {
  const detailsElements = document.querySelectorAll('details');

  detailsElements.forEach(function(details) {
    details.addEventListener('mouseover', function() {
      this.setAttribute('open', 'true');
    });

    details.addEventListener('mouseout', function() {
      this.removeAttribute('open');
    });
  });
});