0

svg の内部にあるボタンにカーソルを合わせたときに、svg の塗りつぶしを変更したい。

<set attributeName="fill" to="#AEAEAE" begin="button.mouseover" end="button.mouseout"/>

これでうまくいくと思いましたが、#FF702A の元の塗りつぶしを保持しています

誰でもこれについて助けることができますか？

/////編集//////

よりシンプルにするためにリファクタリングしました。いくつかの主要な概念が欠けていない限り、これは css だけで可能でしょうか?

これがhtmlです-

 <div id="button">show svg onhover
     <svg id="play" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="42px" height="62px" viewBox="0 0 24 32" style="enable-background:new 0 0 24 32;" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
    <g id="Layer_1">
    </g>
    <g id="play">
      <polygon points="0,0 24,16 0,32  "/>      
    </g>
   </svg>
  </div>

ここに関連するcssがあります

#button {

height: 75px;
width: 275px;
font-size: 25px;
text-align: center;
background: #FF702A;
border-radius: 10px;
padding-top: 40px;
margin-top: 70px;
margin-left: 150px;
opacity: 0.7;
letter-spacing: 1px;
font-variant: small-caps;
color: #EEEEEE;

}

#button:hover {
opacity: 1.0;
font-size: .01em;

}

#play{
position: absolute;
margin-left: -90px;
margin-top: -10px;
visibility: hidden;

}

#play:hover {
visibility: visible;

}

ホバー時にテキストを非表示にするのはハックですが、svg のホバー時に可視性が機能しないのはなぜですか? 元の質問とは異なる方向に進んで申し訳ありませんが、うまくいけば、これで問題が少し解決することを願っています。純粋なcssで達成しようとしています..

4

1 に答える 1

0

CSSを使用してこれを行うこともできます。

#button { fill: #FF702A; }
#button:hover { fill: #AEAEAE; }

なぜ機能しないのかについての答えが必要な場合は、id = "button"の要素（およびその子がある場合）を質問に追加する必要があります。

于 2012-07-16T10:50:11.210 に答える