嗨，我试着画这样的东西:
使用 div 和 css，我需要分别悬停每个区域。 到目前为止，我已经做了类似的事情，但效果不佳，因为它激活了 block ，而且只有两个 block ；/ CSS:
<style type="text/css">
.arrow-up {
position : absolute;
top : 150px;
width: 150px;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid black;
}
.arrow-up:hover{
border-bottom: 60px solid red;
}
.arrow-down {
position : absolute;
top : 90px;
width: 150px;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid blueviolet;
}
.arrow-down:hover{
border-top: 60px solid red;
}
.arrow-right {
position : absolute;
top : 90px;
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right:hover{
border-left: 60px solid red;
}
.arrow-left {
position : absolute;
top : 90px;
left : 217px;
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-right:60px solid blue;
}
.arrow-left:hover{
border-right: 60px solid red;
}
</style>
<html>
<body>
<div class="arrow-down"></div>
<div class="arrow-up"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</body>
</html>
有什么想法吗？ 可能吗？
最佳答案
是的，看起来不错。删除 div:hover 选择器并使用您的类来选择悬停的元素。所以:
.arrow-up:hover{
border-bottom: 60px solid red;
}
现在会将“边框”的颜色更改为红色。希望这能解决问题
您的定位: CSS:
.arrowBox{
display:inline-block;
width:24%;
//for ie 5.5 to 7
float:left;
}
HTML:
<div class="arrowBox">
<!-- arrows go in here -->
</div>
关于Css，分别悬停每个区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14425331/