悬停时过渡，除非悬停在某个元素上答案

【问题标题】：Transition on hover, except if hovering over a certain element悬停时过渡，除非悬停在某个元素上
【发布时间】：2013-01-02 08:25:28
【问题描述】：

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

 ___
|  X|
 ‾‾‾

所以本质上是一个带有按钮的小盒子。

我还对元素应用了 CSS，所以当悬停时，它会变成这样：

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

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

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

纯 CSS 可以做到吗？

编辑：对不起，我添加的这么晚，但答案应该基于这个例子：http://jsfiddle.net/fpY34

【问题讨论】：

我们可以看看你的代码吗？
这几乎是不可能的，但它本质上只是一堆嵌套的 div。我也许可以马上创建一个 JSFiddle。
是的，jsfiddle 会很棒:)
jsfiddle.net/fpY34 这是小提琴。这不是 100% 准确的，但任何基于此的答案都应该适合我。

标签： css css-transitions transition transitions

【解决方案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; }

【讨论】：

抱歉，我不能将关闭按钮作为其余内容的同级按钮。我添加了一个 JSFiddle 作为对 OP 的评论。
我可以更改标记吗？将#img 和#label 包装在容器中会更容易。
很抱歉，我无法更改布局。我知道如果可以的话，这会更容易很多。所以，抱歉，没有。
这就是我今晚的全部。它不漂亮，但它有效。
嗯，你说得对，它不漂亮 :D 它看起来很糟糕，但它现在可以工作。谢谢。

【解决方案2】：

请您检查一下并告诉我您想要什么吗？

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>

【讨论】：

它只是一个简单的场景，如果你需要它可能会更好
它不太适合我。无论我将鼠标悬停在哪里，该 div 都会展开。
我认为这就是你想要的，所以如果你没有找到合适的解决方案，你能向我解释一下你想要什么吗？
我希望当我将鼠标悬停在 div 上时，它会展开，但如果我将鼠标悬停在 X（在 div 内）上，它不会展开。
你需要在外部 div 中使用它吗？？

【解决方案3】：

你可以让它们浮起来：

<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}

但在旧版浏览器中可能无法使用。

【讨论】：