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

Encase a group of child elements within a parent container using

The padding of elements changes accordingly as the dimensions (width/height) of the header are adjusted

How can we programmatically trigger a click action on an element obtained through an HTTP request with the help of Set

Using a percentage width on a <div> element with the "overflow-x: scroll" property does not seem to be functioning properly, even when encapsulated within

Aligning CSS border headers in a slanted or rotated table cell format

Hide the Bootstrap slide menu with jQuery by clicking anywhere on the screen

Is it necessary to have height:0 and width:0 when display:none is already applied?

What is preventing this from being passed to the subsequent component in ReactJS?

How can I achieve a stylish alternating bottom-border effect for my website navigation menu?

Guide to centering Embed horizontally with Bootstrap 5

Is it possible to dynamically adjust the container size based on its content with the help of *ngIf and additional directives?

Issues arise when attempting to alter the background image using jQuery without browserSync being activated

"Verifying the dimensions of the input sizes with the i

Unable to choose fields and options within the popup box

Strategies for implementing a minimum height for grid-template-column containers

Tips on how to display a gif image during the loading of ajax content using JavaScript

Calculating square roots in AngularJS

You can only import Next.js Global CSS from your Custom <App> and not from any other files

conceal the HTML code from the students

Issue with Swiper JS: The buttons on pages three and beyond are unresponsive