不能一次悬停整行

Posted 2021-04-06

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

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>

答案

仅仅因为背景没有在.row元素上定义，而是它的子元素，所以你需要定位孩子。你可以这样做;

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

完整代码：

body {
  margin: 0px;
  padding: 0px;
  background-color: blue;
}

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

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

另一答案

这肯定会奏效

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>

以上是关于不能一次悬停整行的主要内容，如果未能解决你的问题，请参考以下文章

收藏|分享前端开发常用代码片段

悬停时突出显示整个表格行

停止 ImageButton 工具提示出现在通过片段悬停时

悬停时表格标题的边框底部

不能 :hover 整行表格

带有 jQ​​uery 悬停淡入淡出效果的表格