css - 悬停时的过渡，除非悬停在某个元素上

Question

我有一个看起来像这样的元素:

 ___
|  X|
 ‾‾‾ 

本质上是一个带有关闭按钮的小盒子。

我还在元素上应用了 CSS，所以当鼠标悬停时，它会变成这样:

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

简单地说，它只会变得更宽。

现在。我想做的是，每当用户将鼠标悬停在关闭按钮 (X) 上时，该框的大小都不会改变。
但是当用户将鼠标悬停在框上的其他任何位置时，它会按照建议的方式运行。

这可以用纯 CSS 实现吗？

编辑:抱歉，我添加的晚了，但答案应该基于这个例子:http://jsfiddle.net/fpY34

Answer 1

使用您拥有的标记，我不知道如何在没有固定宽度和绝对肮脏的情况下做到这一点。但这是我全力以赴! 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; }