如何在CSS中使用背景图片制作悬停循环

Question

我想在网站全角标题中制作一个特殊的悬停效果循环。

我有8列，标题中有文本模块，第1列具有背景图像。所以我希望背景图片在标题中淡出，并用background-image覆盖所有其他列。

该怎么做？
从答案中复制了CSS片段和HTML代码，从而可以更轻松地理解问题的要点和细节。

The example of what I want to achieve

class Student:
    def __init__(self, name, lastName, programming, algebra,
             calculus, physics, writing):
        self.name = name
        self.lastName = lastName
        self.programming = programming
        self.algebra = algebra
        self.calculus = calculus
        self.physics = physics
        self.writing = writing
    def check(self):
        if self.programming or self.algebra or self.calculus or self.physics or self.writing not in range(11):
            #Change the value of the attributes which are > 10 to 0
        #Is there any way to do it apart from this one?
        #if self.programming not in range(11):
            #self.programming = 0
        #if self.algebra not in range(11):
            #self.algebra = 0
         ................... 

#main-row {
  width:500px;
  position:relative;
  display:flex;
}


.et_pb_column {
  display:inline-block;
  width:25%;
}

.et_pb_module {
width:calc(100% - 30px);
padding:0 14px;
border:1px solid black;
background:pink;
position:relative;
  z-index:10;
  height:50px;
}

.wrapper-background {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  transition: background 3s;
}

#main-row:hover .et_pb_module {
  background:none;
}
#main-row:hover .et_pb_module:hover {
  background:red;
}
#main-row:hover .et_pb_column_0 .et_pb_module.et_pb_text_0:hover ~ .wrapper-background {
  background:cyan;
  z-index:0;
}
#main-row:hover .et_pb_column_0 .et_pb_module.et_pb_text_1:hover ~ .wrapper-background {
  background:lightblue;
  z-index:0;
}
#main-row:hover .et_pb_column_1 .et_pb_module.et_pb_text_2:hover ~ .wrapper-background {
  background:darkgray;
  z-index:0;
}
#main-row:hover .et_pb_column_1 .et_pb_module.et_pb_text_3:hover ~ .wrapper-background {
  background:blue;
  z-index:0;
}
#main-row:hover .et_pb_column_2 .et_pb_module.et_pb_text_4:hover ~ .wrapper-background {
  background:gray;
  z-index:0;
}
#main-row:hover .et_pb_column_2 .et_pb_module.et_pb_text_5:hover ~ .wrapper-background {
  background:green;
  z-index:0;
}
#main-row:hover .et_pb_column_3 .et_pb_module.et_pb_text_6:hover ~ .wrapper-background {
  background:yellow;
  z-index:0;
}
#main-row:hover .et_pb_column_3 .et_pb_module.et_pb_text_7:hover ~ .wrapper-background {
  background:orange;
  z-index:0;
}

Answer 1

您可以使用CSS3动画。 CSS animation docs主要内容：您的主要行必须具有透明背景。必须具有background-image属性，但是如果图像仅包含透明层，则没有该层将不起作用。另外，您必须具有相同的html架构。

#main-row {
  width: 400px;
  height: 200px;
  position:relative;
  display:flex;
  background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
}

[class^="et_pb_column_"] {
  position: absolute;
  height: 100px;
  width: 100px;
  z-index: 1;
}

.et_pb_column_1 {
    top: 8px;
    left: 8px;
}

.et_pb_column_2 {
    top: 8px;
    left: 125px;
}

.et_pb_column_3 {
    top: 8px;
    left: 242px;
}

.et_pb_column_4 {
    top: 8px;
    left: 359px;
}

.et_pb_column_5 {
    top: 125px;
    left: 8px;
}

.et_pb_column_6 {
    top: 125px;
    left: 125px;
}

.et_pb_column_7 {
    top: 125px;
    left: 242px;
}

.et_pb_column_8 {
    top: 125px;
    left: 359px;
}

.et_pb_column_1:hover ~ #main-row {
  -webkit-animation-name: background-col-1;
  -webkit-animation-duration: 2s; 
  -webkit-animation-fill-mode: forwards;
}

.et_pb_column_2:hover ~ #main-row {
  -webkit-animation-name: background-col-2;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
}

.et_pb_column_3:hover ~ #main-row {
  -webkit-animation-name: background-col-3;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
}

.et_pb_column_4:hover ~ #main-row {
  -webkit-animation-name: background-col-4;
  -webkit-animation-duration: 2s; 
  -webkit-animation-fill-mode: forwards;
}

.et_pb_column_5:hover ~ #main-row {
  -webkit-animation-name: background-col-5;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
}

.et_pb_column_6:hover ~ #main-row {
  -webkit-animation-name: background-col-6;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
}

.et_pb_column_7:hover ~ #main-row {
  -webkit-animation-name: background-col-7;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
}

.et_pb_column_8:hover ~ #main-row {
  -webkit-animation-name: background-col-8;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes background-col-1 {
    0% {
        background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
    }
    100% {
        background: url('http://www.permstore.com/wp-content/uploads/2018/11/mphderbglg_01.jpg');
    }
}
@-webkit-keyframes background-col-2 {
    0% {
         background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
    }
    100% {
         background: url('http://www.permstore.com/wp-content/uploads/2018/11/mphderbglg_01.jpg');
    }
}
@-webkit-keyframes background-col-3 {
    0% {
         background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
    }
    100% {
         background: url('http://www.permstore.com/wp-content/uploads/2018/11/mphderbglg_01.jpg');
    }
}

@-webkit-keyframes background-col-4 {
    0% {
         background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
    }
    100% {
         background: url('http://www.permstore.com/wp-content/uploads/2018/11/mphderbglg_01.jpg');
    }
}

@-webkit-keyframes background-col-5 {
    0% {
        background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
    }
    100% {
        background: url('http://www.permstore.com/wp-content/uploads/2018/11/mphderbglg_01.jpg');
    }
}
@-webkit-keyframes background-col-6 {
    0% {
         background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
    }
    100% {
         background: url('http://www.permstore.com/wp-content/uploads/2018/11/mphderbglg_01.jpg');
    }
}
@-webkit-keyframes background-col-7 {
    0% {
         background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
    }
    100% {
         background: url('http://www.permstore.com/wp-content/uploads/2018/11/mphderbglg_01.jpg');
    }
}

@-webkit-keyframes background-col-8 {
    0% {
         background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
    }
    100% {
         background: url('http://www.permstore.com/wp-content/uploads/2018/11/mphderbglg_01.jpg');
    }
}

<!DOCTYPE html>
<html>
<body>
  <div id="main-section" class="et_pb_section et_pb_section_0 et_section_regular">
    <div class="et_pb_column_1"><p> SOME TEXT </p></div>
    <div class="et_pb_column_2">Your content goes here. Edit or remove this text inline or in the module Content settings.</div>
    <div class="et_pb_column_3"><p> SOME TEXT </p></div>
    <div class="et_pb_column_4">Your content goes here. Edit or remove this text inline or in the module Content settings.</div>
    <div class="et_pb_column_5"><p> SOME TEXT </p></div>
    <div class="et_pb_column_6"><p> SOME TEXT </p></div>
    <div class="et_pb_column_7">Your content goes here. Edit or remove this text inline or in the module Content settings.</div>
    <div class="et_pb_column_8"><p> SOME TEXT </p></div>

    <div id="main-row" class="et_pb_row et_pb_row_0 et_pb_row_4col"></div>
  </div>
</body>
</html>

Answer 2

在CSS中，不能从其子项之一更改父项属性。

但是您可以使用包装的尺寸创建子元素，并在鼠标悬停时更新背景。

在下面的示例中，可以调整尺寸，过渡效果甚至背景色。

.wrapper {
  width:500px;
  position:relative;
}
.row {
  display: flex;
  width:100%;
  margin:0px;
}

.col-xs-3 {
  padding:0 14px;
  border:1px solid black;
  display:inline-block;
  width:calc(25% - 30px);
  height:50px;
  background:pink;
  z-index:10;
}

.wrapper-background {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index :0;
  transition: background 3s;
}

.wrapper:hover .col-xs-3 {
  background:none;
}
.wrapper:hover .col-xs-3:hover {
  background:red;
}
.wrapper:hover .row:nth-child(1) .col-xs-3:nth-child(1):hover ~ .wrapper-background {
  background:blue;
  z-index:0;
}

.wrapper:hover .row:nth-child(1) .col-xs-3:nth-child(3):hover ~ .wrapper-background {
  background:darkgray;
  z-index:0;
}
.wrapper:hover .row:nth-child(1) .col-xs-3:nth-child(5):hover ~ .wrapper-background {
  background:yellow;
  z-index:0;
}
.wrapper:hover .row:nth-child(1) .col-xs-3:nth-child(7):hover ~ .wrapper-background {
  background:orange;
  z-index:0;
}
.wrapper:hover .row:nth-child(2) .col-xs-3:nth-child(1):hover ~ .wrapper-background {
  background:gray;
  z-index:0;
}

.wrapper:hover .row:nth-child(2) .col-xs-3:nth-child(3):hover ~ .wrapper-background {
  background:black;
  z-index:0;
}
.wrapper:hover .row:nth-child(2) .col-xs-3:nth-child(5):hover ~ .wrapper-background {
  background:green;
  z-index:0;
}
.wrapper:hover .row:nth-child(2) .col-xs-3:nth-child(7):hover ~ .wrapper-background {
  background:lightblue;
  z-index:0;
}

<div class="wrapper">
  <div class="row">
    <div class="col-xs-3"></div>
    <div class="wrapper-background"></div>
    <div class="col-xs-3"></div>
    <div class="wrapper-background"></div>
    <div class="col-xs-3"></div>
    <div class="wrapper-background"></div>
    <div class="col-xs-3"></div>
    <div class="wrapper-background"></div>
  </div>
  <div class="row">
    <div class="col-xs-3"></div>
    <div class="wrapper-background"></div>
    <div class="col-xs-3"></div>
    <div class="wrapper-background"></div>
    <div class="col-xs-3"></div>
    <div class="wrapper-background"></div>
    <div class="col-xs-3"></div>
    <div class="wrapper-background"></div>
  </div>
</div>

适应您的html，id和class： 您需要在每个et_pb_module之后添加一个

#main-row {
  width:500px;
  position:relative;
  display:flex;
}


.et_pb_column {
  display:inline-block;
  width:25%;
}

.et_pb_module {
width:calc(100% - 30px);
padding:0 14px;
border:1px solid black;
background:pink;
position:relative;
  z-index:10;
  height:50px;
}

.wrapper-background {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  transition: background 3s;
}

#main-row:hover .et_pb_module {
  background:none;
}
#main-row:hover .et_pb_module:hover {
  background:red;
}
#main-row:hover .et_pb_column_0 .et_pb_module.et_pb_text_0:hover ~ .wrapper-background {
  background:cyan;
  z-index:0;
}
#main-row:hover .et_pb_column_0 .et_pb_module.et_pb_text_1:hover ~ .wrapper-background {
  background:lightblue;
  z-index:0;
}
#main-row:hover .et_pb_column_1 .et_pb_module.et_pb_text_2:hover ~ .wrapper-background {
  background:darkgray;
  z-index:0;
}
#main-row:hover .et_pb_column_1 .et_pb_module.et_pb_text_3:hover ~ .wrapper-background {
  background:blue;
  z-index:0;
}
#main-row:hover .et_pb_column_2 .et_pb_module.et_pb_text_4:hover ~ .wrapper-background {
  background:gray;
  z-index:0;
}
#main-row:hover .et_pb_column_2 .et_pb_module.et_pb_text_5:hover ~ .wrapper-background {
  background:green;
  z-index:0;
}
#main-row:hover .et_pb_column_3 .et_pb_module.et_pb_text_6:hover ~ .wrapper-background {
  background:yellow;
  z-index:0;
}
#main-row:hover .et_pb_column_3 .et_pb_module.et_pb_text_7:hover ~ .wrapper-background {
  background:orange;
  z-index:0;
}

<div id="main-row" class="et_pb_row et_pb_row_0 main-row et_pb_row_4col">
				<div class="et_pb_column et_pb_column_1_4 et_pb_column_0    et_pb_css_mix_blend_mode_passthrough">
				
				
				<div class="et_pb_module et_pb_text et_pb_text_0 column-1 et_hover_enabled et_pb_bg_layout_light  et_pb_text_align_left">
				
				
				
			</div> <!-- .et_pb_text -->
      <div class="wrapper-background"></div>
      <div class="et_pb_module et_pb_text et_pb_text_1 column-2 et_hover_enabled et_pb_bg_layout_light  et_pb_text_align_left">
	
				
			</div>
      <div class="wrapper-background"></div>
			</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_4 et_pb_column_1    et_pb_css_mix_blend_mode_passthrough">
				
				
				<div class="et_pb_module et_pb_text et_pb_text_2 column-3 et_hover_enabled et_pb_bg_layout_light  et_pb_text_align_left">
				
			</div> 
      <div class="wrapper-background"></div>
      <div class="et_pb_module et_pb_text et_pb_text_3 column-4 et_hover_enabled et_pb_bg_layout_light  et_pb_text_align_left">

			</div>
      <div class="wrapper-background"></div>
			</div> <!-- .et_pb_column -->
      <div class="et_pb_column et_pb_column_1_4 et_pb_column_2    et_pb_css_mix_blend_mode_passthrough">
				
				
				<div class="et_pb_module et_pb_text et_pb_text_4 column-5 et_hover_enabled et_pb_bg_layout_light  et_pb_text_align_left">
				
				
				
			</div>
      <div class="wrapper-background"></div>
      <div class="et_pb_module et_pb_text et_pb_text_5 column-6 et_hover_enabled et_pb_bg_layout_light  et_pb_text_align_left">
				
				
				
			</div>
      <div class="wrapper-background"></div>
			</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_4 et_pb_column_3    et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				<div class="et_pb_module et_pb_text et_pb_text_6 column-7 et_hover_enabled et_pb_bg_layout_light  et_pb_text_align_left">
				
			</div>
      <div class="wrapper-background"></div>
      <div class="et_pb_module et_pb_text et_pb_text_7 column-8 et_hover_enabled et_pb_bg_layout_light  et_pb_text_align_left">
				
				
				
			</div>
      <div class="wrapper-background"></div>
			</div> <!-- .et_pb_column -->
				
				
			</div>