Невозможно навести всю строку сразу - PullRequest
Новая
       4

Невозможно навести всю строку сразу

0 голосов
/ 12 мая 2018

Я пытаюсь создать копию сайта, который мне показался интересным.Однако я сталкиваюсь с некоторыми проблемами, пытаясь выделить целый ряд, не выделяя другие.Однако я создал таблицу div, когда я пытаюсь выбрать одну строку, например, с классом .row: hover, я ничего не могу выбрать (при наведении курсора мыши должен изменить цвет).Я пробовал несколько комбинаций и поиски в Google, такие как .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>

enter image description here

Ответы [ 2 ]

0 голосов
/ 12 мая 2018

Просто потому, что фон не определен для элемента .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>
0 голосов
/ 12 мая 2018

Это точно будет работать

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, поэтому добавьте тег div в .row: hover и выполните часть css для тега div.Вы также можете добавить любой другой тег / класс / идентификатор и затем манипулировать ими в .row: hover

...