html - 怎么做
鼠标悬停时下拉

Question

任何人都可以帮助我如何使用css在鼠标悬停时制作详细信息下拉列表

这是html代码

<details>
  <summary>Sample</summary>

Details of sample
</details>

当鼠标悬停在它上面时，我需要一个 CSS 代码让它下拉，有人可以帮我吗？

score 7 · Accepted Answer

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/

score 4 · Accepted Answer

看起来这有点旧，但看起来这两个答案并没有直接解决 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。不幸的是，当有 a时， Chrome（至少 v37）会summary从标签顺序中删除元素，甚至添加 a也不能解决这个问题。奇怪的。detailstabindextabindexsummary

这是一个活生生的例子：http ://codepen.io/pdaoust/pen/fHybA

score 2 · Accepted Answer

这是一个（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;}

该解决方案有两个缺点：

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

但这个问题不需要任何特殊的“点击”（它的替代品）。这种替代方法在台式机上可能很有用。对于触摸屏设备，常规的“细节”行为可能会更好。

score 1 · Accepted Answer

试试这个：

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();
    });
});

在这里查看我的jsfile

score 1 · Accepted Answer

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

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

这是我的代码

// 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>

html - 怎么做鼠标悬停时下拉

5 回答 5

Related

Reference

html - 怎么做
鼠标悬停时下拉