How to change color on svg and text at same time when hover?

user_11127401 0
Viewed 355

Hi I have question about my css code. How can I achieve my svg element to change color at same time with text before it on hover.

#den-otvorenych-dveri-container {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  padding: 20px;
}

#den-otvorenych-dveri-img {
  width: 100%;
  height: auto;
  fill: #d63c41;
  position: absolute;
  cursor: pointer;
  left: 0;
  top: 0;
  z-index: -1;
}

#den-otvorenych-dveri {
  text-transform: uppercase;
  text-decoration: none;
  width: 150px;
  text-align: center;
  color: #fff;
  letter-spacing: 0.1em;
  font-weight: bold;
  margin-top: 20px;
  font-size: 0.8em;
  text-shadow: 1px 1px 10px #333;
}


/**
      tHIS IS NOT WORKING AS I EXCEPT
      */

#den-otvorenych-dveri:hover {
  color: #d63c41;
}

#den-otvorenych-dveri-img:hover {
  fill: yellow;
  /*Not working why?*/
}
<div id="den-otvorenych-dveri-container">
  <a href="#" id="den-otvorenych-dveri">
        Deň
        <br />
        otvorených
        <br />
        dverí
        <svg
          id="den-otvorenych-dveri-img"
          enable-background="new 0 0 24 24"
          height="512"
          viewBox="0 0 24 24"
          width="512"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m23.363 8.584-7.378-1.127-3.307-7.044c-.247-.526-1.11-.526-1.357 0l-3.306 7.044-7.378 1.127c-.606.093-.848.83-.423 1.265l5.36 5.494-1.267 7.767c-.101.617.558 1.08 1.103.777l6.59-3.642 6.59 3.643c.54.3 1.205-.154 1.103-.777l-1.267-7.767 5.36-5.494c.425-.436.182-1.173-.423-1.266z"
          />
        </svg>
      </a>
</div>

My sandbox: https://codesandbox.io/s/elastic-hooks-vvgf3?file=/index.html:0-1902

css html
2 Answers

Wrap the text in a span, and use correct z-index as well as selector for svg hover #den-otvorenych-dveri:hover svg{}:

#den-otvorenych-dveri-container {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  padding: 20px;
}

#den-otvorenych-dveri-img {
  width: 100%;
  height: auto;
  fill: #d63c41;
  position: absolute;
  cursor: pointer;
  left: 0;
  top: 0;
  z-index: 0;
}

#den-otvorenych-dveri {
  text-transform: uppercase;
  text-decoration: none;
  width: 150px;
  text-align: center;
  color: #fff;
  letter-spacing: 0.1em;
  font-weight: bold;
  margin-top: 20px;
  font-size: 0.8em;
  text-shadow: 1px 1px 10px #333;
}

#den-otvorenych-dveri span {
  position: relative;
  z-index: 1;
}

#den-otvorenych-dveri:hover {
  color: #d63c41;
}

#den-otvorenych-dveri:hover svg {
  fill: yellow;
}
<div id="den-otvorenych-dveri-container">
  <a href="#" id="den-otvorenych-dveri">
    <span>Deň<br/>otvorených<br/>dverí</span>
    <svg id="den-otvorenych-dveri-img" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg">
      <path d="m23.363 8.584-7.378-1.127-3.307-7.044c-.247-.526-1.11-.526-1.357 0l-3.306 7.044-7.378 1.127c-.606.093-.848.83-.423 1.265l5.36 5.494-1.267 7.767c-.101.617.558 1.08 1.103.777l6.59-3.642 6.59 3.643c.54.3 1.205-.154 1.103-.777l-1.267-7.767 5.36-5.494c.425-.436.182-1.173-.423-1.266z"/>
    </svg>
  </a>
</div>

user_78678220

Just put z-index to your container element

#den-otvorenych-dveri-container {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    padding: 20px;
    z-index: 0;
}
user_48835350
Related