Transition on hover, except if hovering over a certain element

Question

I have an element that looks something like this:

 ___
|  X|
 ‾‾‾

So essentially a tiny box with a button to close it.

I have also applied CSS to the element, so that when hovered, it will turn to something like this:

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

Simply put, it'll just become wider.

Now. what I want to do is that whenever the user hovers over the close button (X), the box will not change its size.
But when the user hovers on anywhere else on the box, it would behave as suggested.

Is this possible with pure CSS?

EDIT: Sorry that I added this late, but the answers should be based around this example: http://jsfiddle.net/fpY34

That's pretty much impossible, but it's essentially just a bunch of nested divs. I might be able to create a JSFiddle in a moment. — , Jan 02 '13 at 08:42
http://jsfiddle.net/fpY34/ Here's the fiddle. It's not 100% accurate, but any answers based on this should work for me. — , Jan 02 '13 at 09:01

Chad · Accepted Answer · 2013-01-02T09:34:33.743

3

Using the markup you have, I have no clue how to do it without fixed widths, and absolute nastiness. But here's me giving my all! 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>

and the beauty:

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

edited Jan 02 '13 at 09:34

answered Jan 02 '13 at 08:51

Chad

5,308
4
24
36

Sorry, but I can't have the close button as a sibling to the rest of the content. I added a JSFiddle as a comment to the OP. – Jan 02 '13 at 09:07
Can I change the markup at all? It would be easier to wrap the #img and #label in a container. – Chad Jan 02 '13 at 09:15
I'm sorry but it's just not possible for me to change the layout. I know it'd be a _lot_ easier if I could. So, sorry but no. – Jan 02 '13 at 09:16
That's all I have for the night. It's not pretty, but it works. – Chad Jan 02 '13 at 09:34
Well you're right about it not being pretty :D It looks awful, but it'll work for now. Thanks. – Jan 02 '13 at 09:45

score 0 · Answer 2 · answered Jan 02 '13 at 08:49

0

would you check this please and tell me if that what you want ?

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>

answered Jan 02 '13 at 08:49

Nour Berro

550
5
14

its only simple scenario it could be better if you need it – Nour Berro Jan 02 '13 at 08:50
It doesn't quite work for me. The div expands no matter where I hover on it. – Jan 02 '13 at 09:02
i thought this is what you want, so if you dont find the right solution, could you explain to me exactly what you want? – Nour Berro Jan 02 '13 at 09:06
I want that when I hover over the div, it would expand, but if I hovered over the X (which is inside the div), it would not expand. – Jan 02 '13 at 09:09
you need it inside the outer div ?? – Nour Berro Jan 02 '13 at 09:12
Yes, I need it inside the outer div. – Jan 02 '13 at 09:13
so can i change the whole CSS ?? dosnt Torr3nt answer works for you? – Nour Berro Jan 02 '13 at 09:36

score 0 · Answer 3 · answered Jan 02 '13 at 08:57

You could float them:

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

Might not work in older browsers though.

Transition on hover, except if hovering over a certain element

3 Answers3