当它在任何一个框中悬浮时，我如何在更多的两个html元素上应用css属性?

How can I apply css properties on more then two html elements when it hover in any of the box and the properties of both elements can change.

当它在任何一个框中悬浮时，我如何在更多的时候应用css属性，并且两个元素的属性都可以改变。

.tab-sec:hover{
    background-color:#1b9927;
    border: 1px solid #4e4e4e;
    color: #000;
    h5{
        color: #fff;
    }
}

I have tried this way but it is not working.

我试过这种方法，但没有用。

3 个解决方案

#1

You can only nest styles with CSS preprocessors like LESS and SASS.

你只能用CSS预处理器(如LESS和SASS)来嵌套样式。

I think to get what you are after you just need to write your style like this:

我想要得到你想要的东西，你只需要这样写你的风格:

.tab-sec:hover{
    background-color:#1b9927;
    border: 1px solid #4e4e4e;
    color: #000;
}

.tab-sec:hover h5{
    color: #fff;
}

#2

Try like this,

这样的尝试,

<!DOCTYPE html>
<html>
<head>
<style>

.over_class:hover {
   border-style: solid;
   border-color:#1b9927;
   color: hotpink;
}
  
</style>
</head>
<body>
<input type="text" class="over_class" /><br/></br/>
<input type="text" class="over_class" /></br/></br/>
<input type="button" class="over_class" value="Submit" />  
  
</body>
</html>

#3

Try this one. This code is for .scss

试试这个。此代码用于.scss。

.tab-sec{
    background-color:#1b9927;
    border: 1px solid #4e4e4e;
    color: #000;
    &:hover {
/* for tab sec*/
    background-color: #ff000;
/*for child elements*/
    h5{
        color: #fff;
    }
  }
}

#1