CSS，将鼠标悬停在每个区域上

Question

Hi i try to draw something like this : 嗨，我尝试画这样的东西：

using divs and css, i need to hover each area separately. 使用div和CSS，我需要分别悬停每个区域。 so far I've done something like this but it does not work well because it activates blocks and only two of it ;/ css : 到目前为止，我已经做了类似的事情，但是它不能很好地工作，因为它激活了块，并且只有两个； / 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>

any idea ? 任何想法？ is it possible ? 可能吗？

demo 演示

Answer 1

Yea looks pretty good. 是的，看起来不错。 Remove the div:hover selector and use your classes to select the elements hover. 删除div：hover选择器，然后使用您的类选择悬停的元素。 So: 所以：

.arrow-up:hover{
    border-bottom: 60px solid red;
}

Will now change the colour of the 'border' to red. 现在将“边框”的颜色更改为红色。 Hope this solves the problem 希望这能解决问题

Your positioning: CSS: 您的位置：CSS：

.arrowBox{
    display:inline-block;
    width:24%;
    //for ie 5.5 to 7 
    float:left;
}

HTML: HTML：

<div class="arrowBox">
<!-- arrows go in here -->

</div>

CSS，将鼠标悬停在每个区域上

问题描述

1 个解决方案

解决方案1
0 2013-01-20 14:16:27

CSS，将鼠标悬停在每个区域上

问题描述

1 个解决方案

解决方案1 0 2013-01-20 14:16:27

解决方案1
0 2013-01-20 14:16:27