3

Вопрос по css, details, html5, html – Как сделать <'details'> выпадающим при наведении мыши

Кто-нибудь может мне помочь, как сделать детали раскрывающегося при наведении мыши с помощью CSS Это HTML-код Sample Details of sampleМне нужен код CSS, чтобы он выпадал, когда на него наведена мышь, может кто-нибудь помочь мне в этом?

<span>@Майкл&#39;Решение достигает этого с использованием чистого CSS (хотя и без использования<code><details></code>).</span>

от Zaz

<span>Это помогает с основным проектом, а также является хорошим решением для некоторых из них, которые мне нужны на сайте, так что еще раз спасибо и отличная часть обучения для jquery стороны .. также любой другой знает, как обрабатывать детали, потому что часть детали что мне нужно ... извините, я изменил комментарий, мой друг также использовал этот аккаунт</span>

от user1868185

4 ответа

1

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

HTML

  
Title
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'

CSS

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

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

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

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

1

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

HTML:

Sample
Detail of theis summary

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 Вот

5

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

HTML

Sample
Detail of this summary

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

CSS

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

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

2

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

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

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

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

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

Похожие вопросы