悬停CSS:在悬停整个div时改变按钮属性，而不仅仅是按钮

Question

我想改变我的按钮的属性时，悬停在整个容器，而不仅仅是按钮。现在，当我悬停按钮时，属性会发生变化。这是我在codepen上的代码。

我的代码是基于这个。

@charset "UTF-8";
/* ------ INTRO - TOP PAGE ----- */

/* ------ BLOC MAUVE ----- */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h8 {
color: #181818;
font-size: 40px;
font-family: Outfit;
letter-spacing: 0.03em;
line-height: 1.4em;
}
.gras {
font-weight: 600;
}
.handwritting {
font-size: 42px;
font-family: Gochi Hand;
letter-spacing: 0.187em;
line-height: 0.9em;
}
.button {
display: inline-block;
position: relative;
border: 0px solid transparent;
overflow: hidden;
text-decoration: none;
outline: none;
color: #FFF;
background: #5358E0;
font-size: 40px;
font-family: Outfit;
letter-spacing: 0.03em;
line-height: 0.9em;
}
.button span {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.button:before,
.button:after {
content: '';
position: absolute;
top: -0.1em;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
background: #F5F6F6;
color: #181818;
padding-top: 0.1em;
padding-bottom: 0.3em;
-webkit-transition: .4s, opacity .6s;
-moz-transition: .4s, opacity .6s;
-o-transition: .4s, opacity .6s;
transition: .4s, opacity .6s;
}

/* :before */
.button:before {
content: attr(data-hover);
-webkit-transform: translate(-150%, 0);
-moz-transform: translate(-150%, 0);
-ms-transform: translate(-150%, 0);
-o-transform: translate(-150%, 0);
transform: translate(-150%, 0);
}

/* :after */
.button:after {
content: attr(data-active);
-webkit-transform: translate(150%, 0);
-moz-transform: translate(150%, 0);
-ms-transform: translate(150%, 0);
-o-transform: translate(150%, 0);
transform: translate(150%, 0);
}

/* Span on :hover and :active */
.button:hover span,
.button:active span {
opacity: 0;
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}

/*  
We show :before pseudo-element on :hover 
and :after pseudo-element on :active 
*/
.button:hover:before,
.button:active:after {
opacity: 1;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
transition-delay: .4s;
}

/* 
We hide :before pseudo-element on :active
*/
.button:active:before {
-webkit-transform: translate(-150%, 0);
-moz-transform: translate(-150%, 0);
-ms-transform: translate(-150%, 0);
-o-transform: translate(-150%, 0);
transform: translate(-150%, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}

/* ------ TEXT BARRÉ ----- */
.underline-animation {
text-decoration: none;
position: relative;
white-space: nowrap;
}
.underline-animation svg {
position: absolute;
top: 30%;
opacity: 0.8;
left: 0;
width: 100%;
height: auto;
}
.underline-animation svg .stroke {
stroke: #5358e0;
stroke-width: 0.15em;
stroke-dasharray: 822;
stroke-dashoffset: 822;
-webkit-animation: underlineAnimation 1s 0.5s ease-in forwards;
animation: underlineAnimation 1s 0.5s ease-in forwards;
}
@-webkit-keyframes underlineAnimation {
from {
stroke-dashoffset: 822;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes underlineAnimation {
from {
stroke-dashoffset: 822;
}
to {
stroke-dashoffset: 0;
}
}
h8:hover .stroke {
stroke: #5358e0;
stroke-width: 0.15em;
stroke-dasharray: 822;
stroke-dashoffset: 822;
-webkit-animation: hoverunderline 1s ease-out;
animation: hoverunderline 1s ease-out;
}
@-webkit-keyframes hoverunderline {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 822;
}
}
@keyframes hoverunderline {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 822;
}
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Outfit:wght@300;600&display=swap" rel="stylesheet">
<div class="btn">
<h8>
<g class="gras">I.−</g> Lieu où l'on vend toutes sortes de
<button class="button" type="button" data-hover="marchandises" data-active="I'M ACTIVE"><span class="handwritting">&nbsp&nbspservices&nbsp&nbsp</span></button>
<u class="underline-animation">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255 32.61"><path d="M5 14.11s54-8 125-9 120 5 120 5-200.5-5.5-239.5 17.5" class="stroke" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" /></svg>généralement</u> à bon
marché.</h8>
</div>

我试着改变这个部分:

.button:hover span,
.button:active span {
opacity: 0;
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}

:

h8:hover span,
.button:active span {
opacity: 0;
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}

它解决了一半的问题。然而，我似乎无法改变其余的。

Answer 1

我假定由"container"你指的是类为btn的div。将.button:hover的所有实例更改为.btn:hover .button。

此外，内联元素不能缩放。设置span为inline-block

.btn {
text-align: center;
padding: 20px;
background: #ddd;
}
.btn:hover .button span {
display: inline-block;
transform: scale(1.3);
}

<div class="btn">
<button class="button" type="button"><span class="handwritting">Button</span></button>
</div>

Answer 2

为此，您需要一些javascript，我已经创建了类button-hover，它将在鼠标到达容器时添加，并在鼠标离开时删除类，这将给你相同的效果，当用户悬停在按钮上，

Codepen演示

const h8 = document.querySelector('h8');
const button = document.querySelector('button');
h8.addEventListener('mouseover', () => {
button.classList.add('button-hover');
});
h8.addEventListener('mouseout', () => {
button.classList.remove('button-hover');
});

@charset "UTF-8";
/* ------ POLICES ----- */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap");
/* ------ INTRO - TOP PAGE ----- */
/* ------ BLOC MAUVE ----- */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h8 {
color: #181818;
font-size: 40px;
font-family: Outfit;
letter-spacing: 0.03em;
line-height: 1.4em;
}
.gras {
font-weight: 600;
}
.handwritting {
font-size: 42px;
font-family: Gochi Hand;
letter-spacing: 0.187em;
line-height: 0.9em;
}
.button {
display: inline-block;
position: relative;
border: 0px solid transparent;
overflow: hidden;
text-decoration: none;
outline: none;
color: #fff;
background: #5358e0;
font-size: 40px;
font-family: Outfit;
letter-spacing: 0.03em;
line-height: 0.9em;
}
.button span {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.button:before,
.button:after {
content: "";
position: absolute;
top: -0.1em;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
background: #f5f6f6;
color: #181818;
padding-top: 0.1em;
padding-bottom: 0.3em;
-webkit-transition: 0.4s, opacity 0.6s;
-moz-transition: 0.4s, opacity 0.6s;
-o-transition: 0.4s, opacity 0.6s;
transition: 0.4s, opacity 0.6s;
}
/* :before */
.button:before {
content: attr(data-hover);
-webkit-transform: translate(-150%, 0);
-moz-transform: translate(-150%, 0);
-ms-transform: translate(-150%, 0);
-o-transform: translate(-150%, 0);
transform: translate(-150%, 0);
}
/* :after */
.button:after {
content: attr(data-active);
-webkit-transform: translate(150%, 0);
-moz-transform: translate(150%, 0);
-ms-transform: translate(150%, 0);
-o-transform: translate(150%, 0);
transform: translate(150%, 0);
}
/* Span on :hover and :active */
.button:hover span,
.button:active span,
.button-hover span, 
.button-active span {
opacity: 0;
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}
/*  
We show :before pseudo-element on :hover 
and :after pseudo-element on :active 
*/
.button:hover:before,
.button:active:after,
.button-hover:before,
.button-active:after {
opacity: 1;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
/* 
We hide :before pseudo-element on :active
*/
.button:active:before,
.button-active:before {
-webkit-transform: translate(-150%, 0);
-moz-transform: translate(-150%, 0);
-ms-transform: translate(-150%, 0);
-o-transform: translate(-150%, 0);
transform: translate(-150%, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
/* ------ TEXT BARRÉ ----- */
.underline-animation {
text-decoration: none;
position: relative;
white-space: nowrap;
}
.underline-animation svg {
position: absolute;
top: 30%;
opacity: 0.8;
left: 0;
width: 100%;
height: auto;
}
.underline-animation svg .stroke {
stroke: #5358e0;
stroke-width: 0.15em;
stroke-dasharray: 822;
stroke-dashoffset: 822;
-webkit-animation: underlineAnimation 1s 0.5s ease-in forwards;
animation: underlineAnimation 1s 0.5s ease-in forwards;
}
@-webkit-keyframes underlineAnimation {
from {
stroke-dashoffset: 822;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes underlineAnimation {
from {
stroke-dashoffset: 822;
}
to {
stroke-dashoffset: 0;
}
}
h8:hover .stroke {
stroke: #5358e0;
stroke-width: 0.15em;
stroke-dasharray: 822;
stroke-dashoffset: 822;
-webkit-animation: hoverunderline 1s ease-out;
animation: hoverunderline 1s ease-out;
}
@-webkit-keyframes hoverunderline {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 822;
}
}
@keyframes hoverunderline {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 822;
}
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com" /><link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin
/><link
href="https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Outfit:wght@300;600&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="btn">
<h8
><g class="gras">I.−</g> Lieu où l'on vend toutes sortes de
<button
class="button"
type="button"
data-hover="marchandises"
data-active="I'M ACTIVE"
>
<span class="handwritting">&nbsp&nbspservices&nbsp&nbsp</span>
</button>

<u class="underline-animation">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255 32.61">
<path
d="M5 14.11s54-8 125-9 120 5 120 5-200.5-5.5-239.5 17.5"
class="stroke"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="10"
/></svg
>généralement</u
>
à bon marché.</h8
>
</div>
</body>
</html>

让我知道，如果这是你想要的，如果你有任何疑问，请告诉我。