>

흥미로운 웹 사이트의 사본을 만들려고합니다. 그러나 나는 다른 사람들을 강조하지 않고 한 번에 전체 행을 강조하려고하는 몇 가지 문제에 봉착했습니다. 그러나 .row 클래스와 같은 단일 행을 선택하려고 할 때 div 테이블을 만들었습니다. 마우스를 움직이면 아무것도 선택할 수 없습니다 (마우스를 움직여 색상을 변경해야 함). .row : hover 열 이름과 같은 여러 조합과 Google 검색을 시도했지만 원하는 행뿐만 아니라 모든 행을 선택합니다. 이 동작이 도움이 될 것임을 알 수 없습니다.

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>

  • 답변 # 1

    간단히 .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>
    
    

  • 답변 # 2

    확실히 작동합니다

    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

    에서 조작 할 수도 있습니다.

  • 이전 terraform에서 countindex를 사용하고 있습니까?
  • 다음 avr - LLVM IR에서 특정 메모리 주소에 대한 전역 포인터 만들기