0

こんにちは、私はこのようなものを描こうとしています:

写真

div と css を使用して、各領域を個別にホバーする必要があります。これまでのところ、私はこのようなことをしましたが、ブロックとその2つだけをアクティブにするため、うまく機能しません;/ 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>

何か案が ？出来ますか ？

デモ

4

1 に答える 1

0

ええ、かなり良さそうです。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>
于 2013-01-20T14:16:27.267 に答える