6

cssを使用してマウスホバーで詳細ドロップダウンを作成する方法について誰か助けてもらえますか

これはhtmlコードです

<details>
  <summary>Sample</summary>

Details of sample
</details>

マウスを置いたときにドロップダウンするためのcssコードが必要です。これについて誰か助けてもらえますか?

4

5 に答える 5

7

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/

于 2013-03-04T03:36:59.920 に答える
4

これは少し古いようですが、2つの回答がHTML5に直接対応していないように見えますdetails/summaryあなたが求めていたように. 残念ながら、CSS でこれを行う方法はありません。 /をサポートしていないブラウザーでは実行できますが、サポートしているブラウザーでは実行できません。detailssummary

残念ながら、この作業をクロスブラウザーにする唯一の方法は、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場合にタブ順序から要素を削除し、 に を追加してもそれは修正されません。変。detailstabindextabindexsummary

これが実際の例です: http://codepen.io/pdaoust/pen/fHybA

于 2014-10-01T16:36:04.587 に答える
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を参照してください

于 2013-03-04T02:35:07.643 に答える
1

詳細も実装されているタイムラインリストがあります。

マウスをその上に移動して自動的に展開し、関係のない領域に移動すると自動的に閉じます。

これが私のコードです

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

于 2021-04-16T07:06:06.247 に答える