标题悬停后，如何使“无序”列表“停留”？

Question

在所附的笔中，我想编写代码，以便用户将“选择设计”悬停后，选项保持不变，而在用户将鼠标移开后不会立即消失。

https://codepen.io/anon/pen/EGNGdR

这是我尝试过的：

nav[role=navigation] {
    display:none;
}

.select:hover + nav[role=navigation] {
    display:block;
}

P.S：我不允许对HTML进行更改。 HTML实际上是CSS Zen Garden默认设计的一部分。

Answer 1

我添加了一个父级div，并给了它课程。

nav[role=navigation] {
  display:none;
}

.select:hover nav[role=navigation] {
  display:block;
}

<div class="design-selection" id="design-selection">
  <div class="select">
				<h3>Select a Design:</h3>
				<nav role="navigation">
					<ul>
					<li>
						<a href="/221/" class="design-name">Mid Century Modern</a> by						<a href="http://andrewlohman.com/" class="designer-name">Andrew Lohman</a>
					</li>					<li>
						<a href="/220/" class="design-name">Garments</a> by						<a href="http://danielmall.com/" class="designer-name">Dan Mall</a>
					</li>					<li>
						<a href="/219/" class="design-name">Steel</a> by						<a href="http://steffen-knoeller.de" class="designer-name">Steffen Knoeller</a>
					</li>					<li>
						<a href="/218/" class="design-name">Apothecary</a> by						<a href="http://trentwalton.com" class="designer-name">Trent Walton</a>
					</li>					<li>
						<a href="/217/" class="design-name">Screen Filler</a> by						<a href="http://elliotjaystocks.com/" class="designer-name">Elliot Jay Stocks</a>
					</li>					<li>
						<a href="/216/" class="design-name">Fountain Kiss</a> by						<a href="http://jeremycarlson.com" class="designer-name">Jeremy Carlson</a>
					</li>					<li>
						<a href="/215/" class="design-name">A Robot Named Jimmy</a> by						<a href="http://meltmedia.com/" class="designer-name">meltmedia</a>
					</li>					<li>
						<a href="/214/" class="design-name">Verde Moderna</a> by						<a href="http://www.mezzoblue.com/" class="designer-name">Dave Shea</a>
					</li>					</ul>
				</nav>
			</div>
  </div>

Answer 2

您需要做的是将:hover添加到父元素而不是同级元素。

.design-selection nav[role=navigation]        { display:none; }
.design-selection:hover nav[role=navigation]  { display: block; }

<div class="design-selection" id="design-selection">
  <h3 class="select">Select a Design:</h3>
  <nav role="navigation">
    <ul>
      <li>
        <a href="/221/" class="design-name">Mid Century Modern</a> by <a href="http://andrewlohman.com/" class="designer-name">Andrew Lohman</a>
      </li>
      <li>
        <a href="/220/" class="design-name">Garments</a> by <a href="http://danielmall.com/" class="designer-name">Dan Mall</a>
      </li>
      <li>
        <a href="/219/" class="design-name">Steel</a> by <a href="http://steffen-knoeller.de" class="designer-name">Steffen Knoeller</a>
      </li>
      <li>
        <a href="/218/" class="design-name">Apothecary</a> by <a href="http://trentwalton.com" class="designer-name">Trent Walton</a>
      </li>
      <li>
        <a href="/217/" class="design-name">Screen Filler</a> by <a href="http://elliotjaystocks.com/" class="designer-name">Elliot Jay Stocks</a>
      </li>
      <li>
        <a href="/216/" class="design-name">Fountain Kiss</a> by <a href="http://jeremycarlson.com" class="designer-name">Jeremy Carlson</a>
      </li>
      <li>
        <a href="/215/" class="design-name">A Robot Named Jimmy</a> by <a href="http://meltmedia.com/" class="designer-name">meltmedia</a>
      </li>
      <li>
        <a href="/214/" class="design-name">Verde Moderna</a> by <a href="http://www.mezzoblue.com/" class="designer-name">Dave Shea</a>
      </li>
    </ul>
  </nav>
</div>