When hovering, transition occurs unless the cursor is over a specific element

Question

When hovering, transition occurs unless the cursor is over a specific element

I have created a small box element with a close button that looks like this:

 ___
|  X|
 ‾‾‾

In order to make it more interactive, I applied some CSS so that when hovered, the box expands like this:

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

Essentially, it just becomes wider and more visible.

Now, my goal is for the box to maintain its expanded size only when any part of the box except the close button (X) is hovered over.
If the user hovers over the close button (X), the box should not change its enlarged state.

Do you believe achieving this behavior using only CSS is possible?

EDIT: I apologize for adding this late, but please base your answers on this live example: http://jsfiddle.net/fpY34

css css-transitions transition

Answer 1

Answer №1

When looking at the code provided, it seems challenging to achieve the desired outcome without using fixed widths and a complex structure. However, I put in my best effort! Check out the solution here

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

Here's how the styling works:

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

Answer 2

When looking at the code provided, it seems challenging to achieve the desired outcome without using fixed widths and a complex structure. However, I put in my best effort! Check out the solution here

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

Here's how the styling works:

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

Answer 3

Answer №2

Could you take a look at this and confirm if it meets your requirements?

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>

Answer 4

Could you take a look at this and confirm if it meets your requirements?

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>

Answer 5

Answer №3

One option is to make them float:

<div class="container">
    <div>
      Your Content
    </div>
    <span>X</span>
</div>

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

Note that this method may not function properly in older browser versions.

Answer 6

One option is to make them float:

<div class="container">
    <div>
      Your Content
    </div>
    <span>X</span>
</div>

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

Note that this method may not function properly in older browser versions.

When hovering, transition occurs unless the cursor is over a specific element

Answer №1

Answer №2

Answer №3

Similar questions

The fix for the unresponsive fixed container in Angular 2 Material

Tips for defining a relative path in the base URL with AngularJS

Is `html.fa-events-icons-ready` causing clutter and disrupting the layout of the body?

Incorporating timed hover effects in React applications

Setting the CSS property `position: absolute; bottom: 0`, will move the div to the bottom of the screen rather than the bottom of

Styling div elements to match the dimensions of table rows in CSS

Discovering the way to retrieve background height following a window resize using jQuery

Encountered a compiling error when attempting to watch for changes on the ./folder directory using the

Grid X Transformation 3: Dynamically alter grid cell background based on value (no need for CSS classes)

Link that updates periodically linked to an image

Create an HTML document with a bottom section that shows up on every page when printed

Enhance your dynamic php page with the use of a light box feature

How to implement a Django block for loading CSS files

What distinctions are there between placing a `<link rel="stylesheet" href=..video.scss>` in the index.html versus utilizing `import '../video.scss'`?

What could be causing the issue of CSS animation not functioning properly when used in conjunction with a

Compass - substitute a single value for an alternate attribute

How to achieve divs with see-through text using CSS?

Performing read and write operations on targeted CSS classes using C#

html and css code to create a linebreak ↵

A dynamic image carousel featuring multiple images can be enhanced with fluid movement upon a flick of