Hover CSS : Changing button properties when hovering the whole div, not just the button-CodePudding

I want to change the properties of my button when hovering the whole container, not just the button. For now the properties are changing when I hover the button. Here's my code on codepen.

I based my code on this one.

@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 >
  <h8>
    <g >I.−</g> Lieu où l'on vend toutes sortes de
    <button  type="button" data-hover="marchandises" data-active="I'M ACTIVE"><span >&nbsp&nbspservices&nbsp&nbsp</span></button>

    <u >
<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"  fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" /></svg>généralement</u> à bon
    marché.</h8>
</div>

I tried changing this section :

.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);
}

To this:

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);
}

And it's working for half the problem. However, I can't seem to be able to change the rest.

CodePudding user response：

I assume by "container" you mean the div with class btn. Change all instances of .button:hover to .btn:hover .button.

Also, inline elements can't be scaled. Set the span to inline-block.

.btn {
  text-align: center;
  padding: 20px;
  background: #ddd;
}

.btn:hover .button span {
  display: inline-block;
  transform: scale(1.3);
}

<div >
  <button  type="button"><span >Button</span></button>
</div>

CodePudding user response：

For this you would need some javascript, I have created class button-hover which will be added when mouse comes over the container and remove the class when mouse leave, this will give you the same effect when user does hover over the button,

Codepen Demo

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 >
    <h8
      ><g >I.−</g> Lieu où l'on vend toutes sortes de
      <button
        
        type="button"
        data-hover="marchandises"
        data-active="I'M ACTIVE"
      >
        <span >&nbsp&nbspservices&nbsp&nbsp</span>
      </button>
  
      <u >
        <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"
            
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="10"
          /></svg
        >généralement</u
      >
      à bon marché.</h8
    >
  </div>
</body>
</html>

Let me know, if this is what you were looking, and if you have any query do let me know.