Hover effect isn't working on the pseudo element

user_4183650 0
Viewed 67

Trying to add hover effect on the pseudo element (on the bottom arrow as well the whole border around) but it doesn't effects and looks like the image below with white arrow and black square, what I am doing wrong here that its not working even I see most of the stacks overflow answer are the same as my one.

Also when I hover on the black border then both border around and the green circle should change it color at the same time, but it seems like it does not happens ( the hovering) at the same time. Any help will be much appreciated!

enter image description here

.outer-circle {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.3);
}

.inner-circle {
  width: 70px;
  height: 70px;
  border-radius: 35px;
  background: #3ac371;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.text {
  position: absolute;
  left: 18px;
  top: 21px;
  font-size: 24px;
  color: white;
}

.outer-circle::before {
  content: "";
  top: 72px;
  left: 24px;
  border-width: 16px;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  box-sizing: border-box;
  position: absolute;
  transform: rotate(-90deg);
}

.outer-circle:hover {
  background: black;
}

.outer-circle:hover:before {
  background-color: black;
}

.dl-inner-circle:hover {
  background: #9f1853;
}
<!-- template -->
<div>
  <div class="markar-container">
    <button>
        <h1>Pin</h1>
        <div class="outer-circle">
          <div class="inner-circle" @click="onClick">
            <div class="text">AA</div>
          </div>
        </div>
      </button>
  </div>
</div>
<!-- /template -->

vue.js css html javascript
1 Answers

Target the border-right-color instead of the background-color

new Vue({
  el: '#demo',
  data() {
    return {

    }
  },
  methods: {
    onClick() {}
  }
})
.outer-circle {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.3);
}

.inner-circle {
  width: 70px;
  height: 70px;
  border-radius: 35px;
  background: #3ac371;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.text {
  position: absolute;
  left: 18px;
  top: 21px;
  font-size: 24px;
  color: white;
}

.outer-circle::before {
  content: "";
  top: 72px;
  left: 24px;
  border-width: 16px;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  box-sizing: border-box;
  position: absolute;
  transform: rotate(-90deg);
  filter: drop-shadow(-8px 0 3px rgba(0, 0, 0, 0.3));
}

.outer-circle:hover {
  background: black;
}

.outer-circle:hover:before {
  border-right-color: black;
}

.dl-inner-circle:hover {
  background: #9f1853;
}


/* .dl-outer-circle:hover:after {
  background: black;
  border-width: 2px;
} */
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div>
    <div class="markar-container">
      <button>
        <h1>Pin</h1>
        <div class="outer-circle">
          <div class="inner-circle" @click="onClick">
            <div class="text">AA</div>
          </div>
        </div>
      </button>
    </div>
  </div>
</div>

user_87315040
Related