个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
25
4
我想在悬停时翻转半圆。
.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> 上面的代码圆圈的底部是红色的我想要的只是我想让圆圈的顶部在悬停时变成红色。
我们将不胜感激。
最佳答案
.main {
border: 2px solid green;
border-radius: 190px;
height: 200px;
width: 200px;
transition: all 0.5s ease;
}
.btm {
border-bottom-left-radius: 190px;
border-bottom-right-radius: 190px;
background-color: red;
height: 100px;
transition: all 0.5s ease;
}
.div-1 {
border-top-left-radius: 190px;
transition: all 0.5s ease;
border-top-right-radius: 190px;
}
.main:hover .div-1 {
background: red;
transition: all 0.5s ease;
}
.main:hover .btm {
background: white;
transition: all 0.5s ease;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="main">
<div style="height: 100px;" class="div-1">
</div>
<div class="btm">
</div>
</div>
</body>
</html>我添加了过渡效果并使用了您的代码!希望对你有帮助
关于html - 悬停时翻转半圆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57751223/
25
4
0
在 flutter 打中，我想剪辑Container的可选部分以制作此小部件: 裁剪小部件，使其顶部和底部有两个半圆。 对于此裁剪的小部件的某些功能，我希望具有一些可选功能，例如: 剪裁顶部，该可选内
我怎样才能画这样的半圆？ 代码: class DrawHalfCircleClipper extends CustomClipper { @override Path getClip(Size
下面是一个二值图像，我想在其中检测“山丘”、半圆、切口……在下图中的红色圆圈中。检测不一定要精确，我只需要知道图片中有这样的东西即可。我正在考虑使用一种线扫描方法并计算线上的黑色像素并用某种“聪明人”
有什么办法可以解决这个问题吗？我尝试更改 border-radius 值并进行了大量搜索，只是为了实现下图中的设计。我想我错过了一些东西，任何人都可以指出我的风格有什么问题。 这是代码。 #wrap
我正在尝试创建一个有 5 个线段的半圆，如下图所示，我可以在其中轻松调整各个线段之间的间距以及线段本身的大小。 CSS 半圆示例 我是前端开发的新手，但我尝试了几种资源，以便在来这里之前自己解决这个问
我做了一个半圆，我想按照我需要的百分比给它上色。文本的位置暂时无关紧要。我想要的是将 50% 的边框着色。稍后我将需要 70% 和 80%。我该怎么做？ .info__radius__outline
我正在试验 SVG 元素。我正在尝试创建一个简单的半圆，但由于某种原因我的半圆旋转了？如何让半圆不旋转？ 我的方法是: SVG“ Canvas ”为 400 x 400 像素，半圆的半径为 180 像
我有一个包含如下数字的实心圆圈: 我如何将它分成两个半圆，以便我可以在其中存储两个不同的数字，如下所示: 我的 CSS 如下: .oval { display: inline-block;
我正在开发一个 Asp.Net MVC 应用程序，其中有一个布局页面，我在其中看到一个像半圆的白色补丁，我试图删除但没有成功。 CSS html { background-color: bla
我需要在 WPF 中绘制一个半圆/半圆。知道怎么做吗？感谢您的任何提示! 最佳答案 ArcSegment将是一个很好的起点。 和here是如何在代码中使用它的一个很好的例子。 关于c# - WPF/C
我正在使用 Highcharts js，我正在尝试用 highCharts 绘制饼图这是一个半圆，里面嵌入了一些文本。 和到目前为止我所做的是 我的 html 标记是
我正在用一张婴儿的动画脸制作一些 CSS 动画，我正在尝试将嘴巴创建为特定的微笑形状。我需要的形状看起来像这样。注意左上角和右上角的圆 Angular : 你可以看到我到这里最近的。唯一缺少的是圆滑的
我正在尝试使用 rCharts 创建一个简单的半圆 donut 和 NVD3 JavaScript 库。下面提供了一个完整的 donut 的最小可重复示例。 library(rCharts) data
我正在尝试在我的 Angular 应用程序中创建一个 Highcharts 半圆圆环图。我已经安装了 Highcharts-ng 指令。无论出于何种原因，它似乎完全跳过了 plotOptions 部分
我是一名优秀的程序员,十分优秀！