Question

任何人都可以帮助我如何使用css

在鼠标悬停时制作细节下拉列表

这是html代码

<details>
  <summary>Sample</summary>

Details of sample
</details>

我需要一个css代码，当它鼠标悬停在它上面时，它可以帮助我吗？

Answer 1

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 2

试试这个：

<强> 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 3

看起来这有点旧了，但看起来这两个答案并没有像你要求的那样直接解决HTML5 details / summary。不幸的是，在CSS中无法做到这一点 - 您可以为不支持details / summary的浏览器执行此操作，但不能用于执行<的浏览器/ em>支持它。

令人遗憾的是，跨浏览器使这项工作的唯一方法是使用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 / {{1 }}。不幸的是，当blur有summary时，Chrome（至少是v37）会从标签顺序中移除details元素，甚至会向tabindex添加tabindex解决这个问题。怪异。

以下是一个实例：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;}

该解决方案有两个缺点：

您无法永久打开“详细信息”（鼠标悬停不是鼠标按下），
它与摘要中的“单击”行为（一次单击永久隐藏详细信息，单击两次以重新建立“悬停”行为）相冲突

，但该问题不需要“点击”（它的替代方法）有什么特殊要求。此替代方法在台式机上可能有用。使用触摸屏设备，常规的“细节”行为可能会更好。

Answer 5

我有一个时间表列表，其中也包含详细信息。

我希望鼠标移动到它上面以自动展开它并在它移动到不相关的区域时自动关闭它。

这是我的代码

// auto-open-details.js

function getDetails(mouseEvent) {
  let target = mouseEvent.target
  if (target.tagName === 'SUMMARY') {
    target = target.parentNode
  }
  if (target.tagName !== 'DETAILS') {
    return  // Using return without a value will return the value undefined.
  }
  return target
}


(
  ()=>{
    const detailsCollection = document.getElementsByTagName('details')

    for (let [key, details] of Object.entries(detailsCollection)){
      details.onmouseover = (mouseEvent) => {
        const target = getDetails(mouseEvent)
        if (typeof target != "undefined") {
          target.open = true
        }
      }   
    }
    
    document.addEventListener('mouseover', (mouseEvent)=>{
      for (let [key, details] of Object.entries(detailsCollection)){
        if (details.matches(':hover')){
           return // Don't use "continue" since its subelement needs to show.
        }
        details.open = false
      }
    })  
  }
)();

<!DOCTYPE html>
<head>
  <!-- Bootstrap is not necessary. I just want to make the example look better. -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- <script defer src="auto-open-details.js"></script> -->
</head>

<article class="row">
  <section class="col-md-4 offset-md-1">
    <details>
      <summary>2021 <small class="text-muted">(5)</small></summary>
      <details>
        <summary>04 <small class="text-muted">(3)</small></summary>
        <ul>
          <li>
            <div>
              <a href="#">Post 1</a>
              <small class="text-muted">
                <time>2021-04-15</time>
              </small>
            </div>
          </li>
          <li>
            <div>
              <a>Post 2</a>
              <small class="text-muted">
                <time>2021-04-12</time>
              </small>
            </div>
          </li>
          <li>
            <div>
              <a>Post 3</a>
              <small class="text-muted">
                <time>2021-04-01</time>
              </small>
            </div>
          </li>
        </ul>
      </details>
      <details>
        <summary>03 <small class="text-muted">(2)</small></summary>
        <ul>
          <li>
            <div>
              <a>Request</a>
              <small class="text-muted">
                <time>2021-03-30</time>
              </small>
            </div>
          </li>
          <li>
            <div>
              <a>Ajax</a>
              <small class="text-muted">
                <time>2021-03-29</time>
              </small>
            </div>
          </li>
        </ul>
      </details>
    </details>
  </section>
  <section class="col-md-4 offset-md-1">
    <details>
      <summary>2020 <small class="text-muted">(2)</small></summary>
      <details>
        <summary>12 <small class="text-muted">(1)</small></summary>
        <ul>
          <li>
            <div>
              <a>Post 1</a>
              <small class="text-muted">
                <time>2021-12-15</time>
              </small>
            </div>
          </li>
        </ul>
      </details>
      <details>
        <summary>11 <small class="text-muted">(1)</small></summary>
        <ul>
          <li>
            <div>
              <a>Post 2</a>
              <small class="text-muted">
                <time>2021-11-29</time>
              </small>
            </div>
          </li>
        </ul>
      </details>
    </details>
  </section>
</article>

如何制作＆lt;＆＃39;详细信息＆＃39;＆gt;鼠标悬停下拉

5 个答案: