我正在尝试重新创建一个我感兴趣的网站的副本。我在行中设置了一个 div 表。在行上,我设置了 4 个 div,以列的形式绝对定位,并将显示设置为无。当我将鼠标悬停在行中的一个元素上时,我希望激活该行的悬停效果并为整列激活列效果。我试过选择列位置中的元素 .one .two 等并选择列 row.one:hover ~ #col,但是我尝试过的所有操作似乎都只激活了顶级元素,而不是同时激活这两个元素(这些元素在某些地方重叠。非常感谢任何解决此问题的帮助。我希望能够在没有 javascript 的情况下实现这种效果。
https://jsfiddle.net/peacefulgoldfish/txcet4yw/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: 80vw;
margin: auto;
height: auto;
background-color: rgb(123, 108, 160);
position: relative;
}
.row {
height: 125px;
background-color: green;
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;
}
#col1 {
display: none;
position: absolute;
height: 100%;
width: 25%;
background-color: purple;
float: left;
z-index: 1;
opacity: .7;
mix-blend-mode: hardlight;
}
.row.one:hover~#col {
display: block;
}
<h1>WEB</h1>
<h2>Hey everyone</h2>
<div id="header"> </div>
<div id="container">
<!-- column selectors -->
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
<div id="col4"></div>
<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>
最佳答案
如果我没理解错的话,那么这是一个适合你的解决方案
CSS:
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: 80vw;
margin: auto;
height: auto;
background-color:rgb(123,108,160);
position: relative;
}
.row{
height: 125px;
background-color:green;
margin: 0px;
padding: 0px;
}
.col-trigger{
border: none;
height: 125px;
float: left;
width: 25%;
margin: 0px;
}
.white{
background-color:white;
}
.green{
border-color: green;
}
.row:hover > div{
background-color:red;
}
.col{
position: absolute;
height:100%;
width: 25%;
display: none;
background-color: purple;
float:left;
top: 0;
z-index: 1;
opacity: .7;
mix-blend-mode: hardlight;
pointer-events: none;
}
.col2 {
left: 25%;
}
.col3 {
left: 50%;
}
.col4 {
left: 75%;
}
.col-trigger:hover+.col{
display: block;
}
html:
<h1>WEB<h1>
<h2>Hey everyone</h2>
<div id="header"> </div>
<div id="container">
<div class="row">
<div class="col-trigger white">
<p>Week 1</br> May 7 <br> - <br> May 11 </p>
</div>
<div class="col col1"></div>
<div class="col-trigger green">
<ul>
<li> Course introduction </li>
<li> Internet Architecture </li>
<li> Introduction to Javascript </li>
</ul>
</div>
<div class="col col2"></div>
<div class="col-trigger white">
<a href=""> Welcome </a>
<a href="" >Lecture 1 </a>
</div>
<div class="col col3"></div>
<div class="col-trigger green">
<h3> Work Due </h3>
</div>
<div class="col col4"></div>
</div>
<div class="row">
<div class="col-trigger white"><p> Week 2</p></div>
<div class="col col1"></div>
<div class="col-trigger green">
<ul>
<li> Javascript functions </li>
<li> Built in Global Functions </li>
</ul>
</div>
<div class="col col2"></div>
<div class="col-trigger white">
<a href=""> Lecture 2 </a>
</div>
<div class="col col3"></div>
<div class="col-trigger green"></div>
<div class="col col4"></div>
</div>
<div class="row">
<div class="col-trigger white"></div>
<div class="col col1"></div>
<div class="col-trigger green"></div>
<div class="col col2"></div>
<div class="col-trigger white"></div>
<div class="col col3"></div>
<div class="col-trigger green"></div>
<div class="col col4"></div>
</div>
</div>
<div class="special"></div>
关于html - 无法让悬停在同一位置的不同级别上影响 2 个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50310664/