2

私は次のような要素を持っています：

 ___
|  X|
 ‾‾‾

つまり、本質的には、それを閉じるためのボタンが付いた小さなボックスです。

また、要素にCSSを適用したので、ホバーすると次のようになります。

 ___________________
|                  X|
 ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾

簡単に言えば、それはただ広くなるでしょう。

今。私がやりたいのは、ユーザーが閉じるボタン（X）にカーソルを合わせても、ボックスのサイズは変更されないということです。
ただし、ユーザーがボックスの他の場所にカーソルを合わせると、提案どおりに動作します。

これは純粋なCSSで可能ですか？

編集：これを遅く追加して申し訳ありませんが、答えはこの例に基づいている必要があります：http: //jsfiddle.net/fpY34

4

3 に答える 3

3

あなたが持っているマークアップを使用して、私は固定された幅と絶対的な不快感なしでそれを行う方法の手がかりがありません。しかし、ここに私がすべてを捧げます！http://jsfiddle.net/fpY34/15/

<div id='outer'>
    <div id='notOuter'>
        <div id='content'>
            <div id='img'>
            </div>
            <div id='label'>
                Text example
            </div>
            <div id='closeButton'>
                X
            </div>
        </div>
    </div>
</div>​

と美しさ：

#outer { height: 30px; }
#notOuter {}
#content { float: left; position: relative; }
#closeButton { background: #0f0; position: absolute; top: 0; left: 30px; width: 30px; height: 30px;} 
#img { background: #f0f; width: 30px; height: 30px; position: absolute; left: 0; top: 0; }
#label { display: none; position: absolute; left: 0; top: 0; width: 60px; height: 30px; background: #f00; }
#img:hover { width: 60px; z-index: 10; }
#img:hover + #label,
#label:hover { display: block; z-index: 20; }
#img:hover ~ #closeButton,
#label:hover + #closeButton { left: 60px; }

</ p>

于 2013-01-02T08:51:48.157 に答える
0

これをチェックして、それが欲しいかどうか教えていただけませんか？

http://jsfiddle.net/UjPtv/10/

<style>
        .divs
        {
            height: 20px;
            width: 100px;
            border: 1px solid;
            padding: 5px 3px;
        }
         .divs:hover
        {

            width: 50px;
            padding-left: 150px

        }
    </style>
    <div class="divs"><span>X</span></div>​
于 2013-01-02T08:49:29.100 に答える
0

あなたはそれらを浮かせることができます：

<div class="box">
    <div>
      Content
    </div>
    <span>X</span>
</div>​​​​​​​

.box {display:inline-block;border:1px solid black}
.box div {width:100px;float:left}
.box div:hover {width:200px}
.box span {float:left}​

ただし、古いブラウザでは機能しない可能性があります。

于 2013-01-02T08:57:17.393 に答える