- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我目前正在尝试将一个正方形制作成 4 个大小相等的三 Angular 形,上面有悬停事件。
我正在创建这样的三 Angular 形,
.right, left, .top, .bottom {
position: relative;
width: 26px;
}
.right:before{
position: absolute;
display: inline-block;
border-top: 26px solid transparent;
border-right: 26px solid #eee;
border-bottom: 26px solid transparent;
left: 26px;
top: 0px;
content: '';
}
我发现每个三 Angular 形都位于另一个三 Angular 形之上,这意味着只能悬停一个三 Angular 形,这是我的示例,
http://codepen.io/anon/pen/qdmbKz
如您所见,只有底部三 Angular 形(悬停在正方形底部)是可悬停的。我究竟做错了什么?有更好的方法吗?
最佳答案
正如您在问题中已经指出的那样,hover
仅适用于底部三 Angular 形而不适用于其他三 Angular 形的原因是因为底部三 Angular 形的容器位于其他三个三 Angular 形。
虽然使用边框技巧生成三 Angular 形,但实际形状仍然是正方形。它获得三 Angular 形外观只是因为其他三个边框是透明的。现在,当您将鼠标悬停在形状上时,您实际上是在悬停底部三 Angular 形的透明区域,而不是其他三 Angular 形的容器,这就是它们各自的 hover
事件不会被触发的原因。
我个人建议对这些类型的东西使用 SVG,但使用 CSS 实现形状也不是那么复杂。
SVG:
在 SVG 中,您可以使用 polygon
元素在正方形内创建四个三 Angular 形,每个 polygon
都可以单独悬停。如果他们应该有自己的目标链接,您还可以将多边形包含在 a
( anchor )标记中。
在代码片段中,我只为一个三 Angular 形实现了 anchor
.square {
height: 400px;
width: 400px;
overflow: hidden;
}
svg {
height: 100%;
width: 100%;
}
polygon {
fill: aliceblue;
stroke: crimson;
stroke-linejoin: round;
}
polygon:hover {
fill: cornflowerblue;
}
<div class='square'>
<svg viewBox='0 0 100 100'>
<a xlink:href='http://google.com'>
<polygon points='5,5 50,50 95,5' />
</a>
<polygon points='5,5 50,50 5,95' />
<polygon points='5,95 50,50 95,95' />
<polygon points='95,5 50,50 95,95' />
</svg>
</div>
CSS:
这是对 here 发布的答案的改编通过网络提基。我发布了一个单独的答案,因为这个问题中的形状要简单得多,不需要像另一个问题那样多的工作。
使用以下方法将正方形分成四个大小相等的悬停三 Angular 形:
transform-origin
设置为 top left
以父方 block 的中心点为轴完成旋转。overflow: hidden
以防止每个方 block 的另一半可见。注意:演示中包含的脚本是无前缀库,用于避免浏览器前缀。
.square {
position: relative;
height: 200px;
width: 200px;
border: 2px solid crimson;
overflow: hidden;
transition: all 1s;
}
.top,
.left,
.right,
.bottom {
position: absolute;
height: calc(100% / 1.414);
width: calc(100% / 1.414);
top: 50%;
left: 50%;
border: 1px solid crimson;
transform-origin: 0% 0%;
}
.right {
transform: rotate(-45deg);
}
.bottom {
transform: rotate(45deg);
}
.top {
transform: rotate(-135deg);
}
.left {
transform: rotate(135deg);
}
.square > div:hover {
background: tomato;
}
/*Just for demo*/
.square:hover{
height: 300px;
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='square'>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
关于html - CSS将一个正方形分成4个三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30676025/
我正在尝试创建带有固定三 Angular 形导航的网页。 问题是我无法将较小的三 Angular 形放入大三 Angular 形中,如下图所示。 当调整窗口大小时三 Angular 形正在改变它的 A
我目前正在使用 Angular-material,但我在另一个项目中遇到了一种情况,迫使我使用类似 angular material chips 的东西。效果如本链接所述。 对我来说主要的麻烦是我想在
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 6 年前。 Improve this ques
我通过将一个正方形旋转 45 度创建了一个菱形: .shape { height: 50px; width: 50px; transform: rotate(45deg); } 是否
我使用 css 创建了一个三 Angular 形: .box { width: 0; height: 0; border-style: solid; border-width: 540px 964px
如何创建边框三 Angular 形? 我唯一能想到的就是做一个三 Angular 形 .triangle { width: 0; height: 0;
我想创建一个旋转函数,在该函数中我的三 Angular 形可以像轮子一样自行旋转,但我与移动三 Angular 形的部分代码发生冲突,我尝试了许多解决方案但没有成功,也许如果你们中的一个人知道它会对人
我正在使用线性垫步进器。 它与 next 一起工作正常。我进行 api 调用,如果成功,则调用 stepper-next 事件而不是使用 matStepperNext 指令。 现在,当用户在第 1 步
我想根据用户的 onClick 事件将 V 形从 down 更改为 up。我尝试过使用其他人的其他示例,但没有成功。 这是我的JSFiddle . 最佳答案 嗯,您的 JSFiddle 设置存在一些问
我想在鼠标单击的地方绘制一个 2D 三 Angular 形。已经制作了鼠标事件处理程序,并且可以看到鼠标单击的点。我在缓冲区对象中写入了三 Angular 形的顶点位置。它将是三 Angular 形大
有人可以告诉我我在 Javascript 中的帕斯卡三 Angular 形上做错了什么吗?我看到一个已经存在的使用递归的线程,但是,在没有逐字复制的情况下,在我看来,代码看起来太相似,无法破译我做错了
我必须为我的类(class)使用星号制作一个三 Angular 形和倒三 Angular 形。 我已经制作了上半部分,但是,我在制作上下颠倒的部分时遇到了很大的麻烦 for(var count=1;
我想获取围绕一个点的三 Angular 形的点,其中面指向指定法线的方向。我将使用 THREE.js 将它们添加到 BufferGeometry。 非常粗略的绘图: 这是我到目前为止的代码: //Th
我从编程开始。我正在使用 JavaScript。 为了练习,我打印了一个像这样的三 Angular 形: * ** *** **** ***** 但我想从右向左打印,如下所示: * **
我需要在 Joint JS 中创建一些以圆形源开头并以三 Angular 形结尾的链接,反之亦然,得到了这个,但它不起作用: var link1 = new joint.dia.Link({
这个问题已经有答案了: 奥 git _a (1 个回答) 已关闭 6 年前。 我做了一些安静的搜索,发现了很多将星星和其他形状输出到无数图案中的方法,但我还没有找到任何关于如何使用用户生成的短语来做到
我正在尝试仅使用递归打印出字母 V 的形状。我在这个网站上看到了一些与我的问题相关的代码,但大多数使用循环而不是递归。 这是我的代码: public class Pattern { pub
这个问题在这里已经有了答案: How to Make A Chevron Arrow Using CSS? (10 个答案) 关闭 7 年前。 我想给this triangle中间略有下降,我不想要
我的问题是关于使用 Javascript 对其边进行三 Angular 形评估。以下代码是非常初始的版本,即使它可以工作。我想知道它是否可以更简化,或者有其他方法可以达到相同的结果。 谢谢! let
function makeLine(length) { var line = ""; for (var i = 1; i <= length; i++) { for (var j =
我是一名优秀的程序员,十分优秀!