在悬停时翻转半圆 [英] On hover flip the semi-circle

问题描述

我想在悬停时翻转半圆.

I want to flip the semi-circle on hovering.

.main {
  border: 2px solid green;
  border-radius: 190px;
  height: 200px;
  width: 200px;
}

.btm {
  border-bottom-left-radius: 190px;
  border-bottom-right-radius: 190px;
  background-color: red;
  height: 100px;
}

<div class="main">
  <div style="height: 100px;">
  </div>
  <div class="btm">
  </div>
</div> 

上面的代码将圆圈的底部涂成红色，我想要的只是我想在悬停时使圆圈的顶部变为红色.

The above code the bottom part of the circle is red colored what I want is just I want to make top part of the circle to be red on hovering.

任何帮助都会得到赞赏.

Any help will be Appreciated.

推荐答案

您可以使用linear-gradient(180deg, transparent 50%, red 50%);轻松实现此目的.您可以在主分区的悬停处交换颜色. 希望这就是您想要的.

You can achieve this easily like this using the linear-gradient(180deg, transparent 50%, red 50%);. You can swap the colors on hover at the main division. Hope this is what you are looking for.

.main {
  border: 2px solid green;
  border-radius: 190px;
  height: 200px;
  width: 200px;
  background: linear-gradient(180deg, transparent 50%, red 50%);
}

.main:hover {
  background: linear-gradient(180deg, red 50%, transparent 50%);
}

<div class="main">

</div>

这篇关于在悬停时翻转半圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！