不能一次悬停整行

时间：2018-05-11 23:26:47

标签： html css hover row

我正在尝试创建一个我认为很有趣的网站副本。然而，我遇到了一些问题，试图立即突出显示整行，而没有突出显示其他行。我已经创建了一个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>

enter image description here

2 个答案:

答案 0 :(得分：1)

这肯定会奏效

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

在你的css部分，只需更改你的.row：hover to 

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

.row：悬停在悬停时，你想操纵div标签，所以在.row中添加d​​iv标签：悬停并为div标签做css部分。 您还可以添加任何其他标记/类/ ID，然后在.row：hover

中操作它们

答案 1 :(得分：0)

仅仅因为背景未在.row元素上定义，而是在其子元素上定义，因此您需要定位子元素。你可以这样做; 

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

完整代码：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题