Question

这是我的代码：

a）我在顶部有一排按钮格式化为水平格式：

HTML：

<ul class="nav"> 
<a href="#jobs"class="button1">Work</a>
<a href="#volunteer" class="button2"> Volunteer</a>
<a href="#education" class="button3"> Education</a>
<a href="#skills" class="button4"> Skills</a> 
<a href="#references" class="button5"> References</a>
<a href="#images" class="button6"> Images</a> 
</ul>

b）我有div块，每个块显示一个段落：

<div class="jobs"> 
<h2>text</h2> 
<h3>text</h3> 
<h4>text</h4> 
</div>

c）我希望CSS不显示作业div：

.jobs {
   display: none;
}

d）现在我将鼠标悬停在第一个按钮上，我希望显示作业div：

.button1:hover+.jobs {
display: block
    }

e）对所有其他div部分重复

.volunteer {
       display: none;
    }

    .button2:hover+.volunteer {
        display:block

    }

Answer 1

您需要以不同方式标记HTML。

＆＃13;

.jobs, .volunteer {
   display: none;
}
.button1:hover+.jobs, .button2:hover+.volunteer {
   display: block;
   /* position the divs under the navigation links */
   position: absolute;
   top: 120px;
}

＆＃13;

<ul class="nav"> 
  <li>
    <a href="#jobs"class="button1">Work</a>
    <div class="jobs"> 
      <h2>h2 jobs</h2> 
      <h3>h3 jobs</h3> 
      <h4>h4 jobs</h4> 
    </div>
  </li>
  <li>
    <a href="#volunteer" class="button2"> Volunteer</a>
    <div class="volunteer"> 
      <h2>h2 volunteer</h2> 
      <h3>h3 volunteer</h3> 
      <h4>h4 volunteer</h4> 
    </div>
  </li>
  <li><a href="#education" class="button3"> Education</a></li>
  <li><a href="#skills" class="button4"> Skills</a></li>
  <li><a href="#references" class="button5"> References</a></li>
  <li><a href="#images" class="button6"> Images</a></li>
</ul>

＆＃13;

Answer 2

如上所述，这是不可能的，只有当前的HTML，只有HTML和CSS（尽管可能只有reference和:matches()伪选择器到达）。但是，如果您{而不是:hover愿意使用list-elements上的点击，则可以完成（不使用JavaScript）。鉴于更正后的HTML：

<ul class="nav">
    <li><a href="#jobs" class="button1">Work</a>
    </li>
    <li><a href="#volunteer" class="button2"> Volunteer</a>
    </li>
    <!-- and so on... -->
</ul>
<div id="details">
    <div id="jobs"></div>
    <div id="volunteer"></div>
    <!-- and so on... -->
</div>

点击div元素后，以下CSS会显示相关的<a>元素（请注意，使用id对于此工作至关重要）：

#details > div {
    /* to hide the eleemnt(s) initially: */
    display: none;
}

#details > div:target {
    /* to show the relevant element once the relevant link is clicked: */
    display: block;
}

＆＃13;

#details > div[id]::after {
  content: attr(id);
}
#details > div {
  display: none;
}
#details > div:target {
  display: block;
}

＆＃13;

<ul class="nav">
  <li><a href="#jobs" class="button1">Work</a>
  </li>
  <li><a href="#volunteer" class="button2"> Volunteer</a>
  </li>
  <li><a href="#education" class="button3"> Education</a>
  </li>
  <li><a href="#skills" class="button4"> Skills</a>
  </li>
  <li><a href="#references" class="button5"> References</a>
  </li>
  <li><a href="#images" class="button6"> Images</a>
  </li>
</ul>
<div id="details">
  <div id="jobs"></div>
  <div id="volunteer"></div>
  <div id="education"></div>
  <div id="skills"></div>
  <div id="references"></div>
  <div id="images"></div>
</div>

＆＃13;

另一方面，使用纯JavaScript，可以通过以下方式实现：

// the 'e' argument is automatically to the function by addEventListener():
function toggleRelevant (e) {
    // caching the 'this' element:
    var self = this,
    // finding the div element with a class equal to the href of the 'a' element
    // (though we're stripping off the leading '#':
        relevantElement = document.querySelector('div.' + self.getAttribute('href').substring(1) );
    // if the event we're responding to is 'mouseover' we set the display of the
    // found div to 'block', otherwise we set it to 'none':
    relevantElement.style.display = e.type === 'mouseover' ? 'block' : 'none';
}

// finding all the a elements that are in li elements:
var links = document.querySelectorAll('li a');

// iterating over those a elements, using Array.prototype.forEach:
[].forEach.call(links, function(linkElem){
    // adding the same event-handler for both mouseover and mouseout:
    linkElem.addEventListener('mouseover', toggleRelevant);
    linkElem.addEventListener('mouseout', toggleRelevant);
});

＆＃13;

function toggleRelevant(e) {
  var self = this,
    relevantElement = document.querySelector('div.' + self.getAttribute('href').substring(1));

  relevantElement.style.display = e.type === 'mouseover' ? 'block' : 'none';
}

var links = document.querySelectorAll('li a');

[].forEach.call(links, function(linkElem) {
  linkElem.addEventListener('mouseover', toggleRelevant);
  linkElem.addEventListener('mouseout', toggleRelevant);
});

＆＃13;

div[class] {
  display: none;
}
div[class]::before {
  content: attr(class);
  color: #f00;
  border: 1px solid #f00;
  padding: 0.2em;
}

＆＃13;

<ul class="nav">
  <li><a href="#jobs" class="button1">Work</a>
  </li>
  <li><a href="#volunteer" class="button2"> Volunteer</a>
  </li>
  <!-- and so on... -->
</ul>
<div class="jobs">
  <h2>text</h2>
  <h3>text</h3>
  <h4>text</h4>
</div>
<div class="volunteer">
  <h2>text</h2>
  <h3>text</h3>
  <h4>text</h4>
</div>
<!-- and so on... -->

＆＃13;

Answer 3

我不认为这可以在css中使用，因为显示块（作业，volonteer，...）和按钮不是父级。但是在jQuery中这很简单：

$('.buttonX').hover(
    function() {
        // Styles to show the box
        $('.boxX').css(...);
    },
    function () {
        // Styles to hide the box
        $('.boxX').css(...);
        }
);

Answer 4

听起来你正试图做某种标签菜单，按下特定按钮会显示不同的内容。这是一个SO页面，描述了它是如何完成的：How to make UL Tabs with only HTML CSS

仅使用CSS / HTML将鼠标悬停在按钮上时显示div

4 个答案: