时间戳

首页 > 解决方案 > 不能一次悬停整行

html - 不能一次悬停整行

问题描述

我正在尝试创建一个我认为很有趣的网站的副本。但是，我在尝试一次突出显示整行而不突出显示其他行时遇到了一些问题。我创建了一个 div 表，但是当我尝试选择单行时，例如类 .row:hover 我无法选择任何内容（悬停鼠标应该改变颜色）。我尝试了多种组合和谷歌搜索，例如 .row:hover 列名，但是这会选择每一行，而不仅仅是我想要的那一行。我似乎无法弄清楚这种行为会感谢任何帮助。

https://jsfiddle.net/u31h4n5y/


body {
  width: 100vw;
  margin: 0px;
  padding: 0px;
  background-color: blue;
  overflow: hidden;
}

h1,
h2 {
  font-family: sans-serif;
  color: white;
  text-align: center;
}

#container {
  width: 63vw;
  margin: auto;
  height: auto;
  background-color: rgb(123, 108, 160);
}

.row {
  height: 125px;
  background-color: red;
  margin: 0px;
  padding: 0px;
}

.one {
  border: none;
  height: 125px;
  float: left;
  width: 25%;
  background-color: white;
  margin: 0px;
}

.two {
  border: none;
  height: 125px;
  float: left;
  width: 25%;
  background-color: green;
  margin: 0px;
}

.three {
  border: none;
  height: 125px;
  float: left;
  width: 25%;
  background-color: white;
}

.four {
  border: none;
  height: 125px;
  float: left;
  width: 25%;
  background-color: green;
}

.row:hover {
  background-color: red;
}
<h1>WEB
  <h1>
    <h2>Hey everyone</h2>
    <div id="header"> </div>
    <div id="container">
      <div class="row">
        <div class="one">
          <p>Week 1</br> May 7 <br> - <br> May 11 </p>
        </div>
        <div class="two">
          <ul>
            <li> Course introduction </li>
            <li> Internet Architecture </li>
            <li> Introduction to Javascript </li>
          </ul>
        </div>
        <div class="three">
          <a href=""> Welcome </a>
          <a href="">Lecture 1 </a>
        </div>

        <div class="four">
          <h3> Work Due </h3>
        </div>
        <div class="row">
          <div class="one">
            <p> Week 2</p>
          </div>
          <div class="two">
            <ul>
              <li> Javascript functions </li>
              <li> Built in Global Functions </li>
            </ul>
          </div>
          <div class="three">
            <a href=""> Lecture 2 </a>
          </div>
          <div class="four"></div>
        </div>
        <div class="row">
          <div class="one"></div>
          <div class="two"></div>
          <div class="three"></div>
          <div class="four"></div>
        </div>
      </div>


      <div class="special"></div>

在此处输入图像描述

标签： htmlcsshoverrow

解决方案

这肯定会奏效 

body {
  width: 100vw;
  margin: 0px;
  padding: 0px;
  background-color: blue;
  overflow: hidden;
}

h1,
h2 {
  font-family: sans-serif;
  color: white;
  text-align: center;
}

#container {
  width: 63vw;
  margin: auto;
  height: auto;
  background-color: rgb(123, 108, 160);
}

.row {
  height: 125px;
  background-color: red;
  margin: 0px;
  padding: 0px;
}

.one {
  border: none;
  height: 125px;
  float: left;
  width: 25%;
  background-color: white;
  margin: 0px;
}

.two {
  border: none;
  height: 125px;
  float: left;
  width: 25%;
  background-color: green;
  margin: 0px;
}

.three {
  border: none;
  height: 125px;
  float: left;
  width: 25%;
  background-color: white;
}

.four {
  border: none;
  height: 125px;
  float: left;
  width: 25%;
  background-color: green;
}

.row:hover div {
  background-color: red;
}
<!DOCTYPE html>
<html>
<h1>WEB</h1>
<h2>Hey everyone</h2>
<div id="header"> </div>
<div id="container">
  <div class="row">
    <div class="one">
      <p>Week 1<br> May 7 <br> - <br> May 11
        <p/>
    </div>
    <div class="two">
      <ul>
        <li> Course introduction </li>
        <li> Internet Architecture </li>
        <li> Introduction to Javascript </li>
      </ul>
    </div>
    <div class="three">
      <a href=""> Welcome </a>
      <a href="">Lecture 1 </a>
    </div>

    <div class="four">
      <h3> Work Due </h3>
    </div>
  </div>
  <div class="row">
    <div class="one">
      <p> Week 2</p>
    </div>
    <div class="two">
      <ul>
        <li> Javascript functions </li>
        <li> Built in Global Functions </li>
      </ul>
    </div>
    <div class="three">
      <a href=""> Lecture 2 </a>
    </div>
    <div class="four"></div>
  </div>
  <div class="row">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>


<div class="special"></div>

</html>

在你的 css 部分，只需将你的 .row:hover 更改为 

.row:hover div {
      background-color:red;
    }

.row:hover 当你悬停它时，你想操作 div 标签，所以在 .row:hover 中添加 div 标签并为 div 标签做 css 部分。您还可以添加任何其他标签/类/ID，然后在 .row:hover 中操作它们

推荐阅读