CSS Issue: Unable to Override Outer Element Width

I am currently working on creating a text element with a limited width, as if it were in a left pane (using .under & width: 160px in this example).

The goal is to have another text element display over the first one (.over & width: 300px) when you hover over it. However, I am facing an issue where the width of the .over text element does not stay within its specified width and instead expands to match the parent width (.under).

I have tried using z-index and position: absolute, but I cannot get the hover text to display correctly.

Any advice or assistance would be greatly appreciated. Thank you!

Note: I am unable to replicate the exact behavior I am experiencing on my site in JSFiddle. When attempting to make the overflow visible, it simply adds a horizontal scrollbar rather than bringing the hover text fully to the forefront. (Hover text appears as a black line)

https://i.sstatic.net/tuAAW.png

htmlcss

Answer №1

To resolve this issue, simply include overflow: visible; in the CSS for the .under div when it is being hovered.

Styling in CSS

.under:hover {
  overflow: visible;
}


.under {
  width: 160px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.over {
    visibility: hidden;
    background-color: black;
    color: #fff;
    border-radius: 6px;
    padding: 5px 0;

    position: absolute;
    top: -5px;
    left: 0%;
    z-index: 1;

    width: 300px;
}

.under:hover {
  overflow: visible;
}

.under:hover .over {
  visibility: visible;
}
<div class="under">
Something long and cut off
  <span class="over">
    Something long and NOT cut off
  </span>
</div>

Check out the demo on JSFiddle

Answer №2

Simply delete the overflow: hidden property from the ".under" CSS class.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The DOM HTMLElement's className property is empty when the element does not have a class name specified

What is the value of the HTMLElement className property when it has no class name set in HTML? Initially, I thought it would be undefined, but I discovered that in Firefox, it is actually an empty string. This raises the question - can this behavior be r ...

javascripthtmldomclassnamespecifications

How can a single value from one table be allocated to multiple values in another table?

There are 3 distinct tables that I am working with: process table: | projectNo | process | studio | +-----------+---------+--------+ | 170001 | ANM BLD | APEX | | 170001 | ANM BLD | CANVAS | | 170002 | CGI MOD | APEX | | 170003 | CGI MOD | ...

phphtmlmysql

Struggling to access a JSON file using Angular framework

I'm currently working with the following JSON and controllers: JSON Format: {"tomcatLogDir":"C:\\apache-tomcat-7.0.70\\logs","tomcatLogs":["1.log","2.log","3.log"]} Factory: app.factory('filesFactory', [ '$http&a ...

htmlangularjsjsonangularjs-ng-repeatangularjs-controller

Break down the text of a paragraph into separate words, placing each word within its own span element, and then add animations

I am facing an issue with my paragraph element that has the display property set to hidden. I have split each word of the paragraph and placed them inside individual span elements. My goal is to create an effect where each word comes from different locatio ...

javascripthtmlcss

Exploring the application of AJAX value within inline HTML using JINJA

My flask server responds to an AJAX call with data, which I then display dynamically in my html using the ids of the elements. Now, I want to take it a step further and change the color of the html component based on the value returned. I attempted to us ...

htmlajaxflaskjinja2

Optimize your texture loading process by dynamically swapping out low resolution textures with high resolution ones to enhance overall visual quality

In my current ThreeJS project, I have encountered an issue when trying to swap one texture with another. The problem arises when the UV's become completely distorted after the texture switch. Below is the snippet of code that showcases how I am attemp ...

javascripthtmlthree.jsgltf

Is there a way to seamlessly incorporate a PHP tag into a Bootstrap dropdown for perfect alignment?

In relation to this query: I have successfully integrated the if/else statement into the dropdown without any issues. However, upon using the dropdown on the website, I noticed that the item generated by the if/else statement – in this case, "log in" or ...

phphtmlcssbootstrap-4

Embracing Blackberry WebWorks for Enhanced HTML5 Support

Can someone assist me with this question? I am wondering if my Blackberry Bold 9700 (5.0.0.469) is capable of supporting HTML5 for audio streams. Thank you in advance. ...

htmlblackberryaudiostream

challenges arise when using star icons to rate items visually, as the corresponding hidden values for backend processing are linked to radio input types

Hello, I am trying to retrieve the value of an input type radio by clicking on a star image visually. I have been successful in this, but I am having trouble resetting the star image in another row. You can view a demo of this here. I will explain what I ...

jqueryhtmlcssdefault-valuerating

I'm going crazy with Visual Studio 2017 constantly reformatting my code

Out of all the pages I've created, there is one page, and only one page, that always gives me trouble. Every time I save my "Settings.aspx" page in Visual Studio, it decides to play a prank on me and re-format all my code! And no, there is no other de ...

htmlasp.netvisual-studio-2017

Animate an svg icon to follow a designated path as the user scrolls

I am currently working on a project that involves animating a bee svg icon as the user scrolls through the website. The bee starts at the top and fills in a grey color line with pink as the user moves forward, and moves backward as the user scrolls back. Y ...

javascripthtmljquerycss

Ways to adjust the color of a cell in a table

I am working on customizing a table in my website where I need to change the color of a single cell in each row, similar to the example shown in this image: https://i.sstatic.net/1wtit.jpg Here is the HTML code that I have implemented so far: < ...

javascripthtmlhtml-table

Switch between list items using a button to change the ID in Javascript

I am trying to implement a floating navbar that appears after a button click and floats down from the top. The idea is that when the button is clicked, the navbar animates downward and then changes the button's id so that the next click triggers a dif ...

javascripthtmljquerybutton

What strategies can be utilized to raise the max-height from the bottom to the top?

I am facing the following coding challenge: <div id = "parent"> <div id = "button"></div> </div> There is also a dynamically generated <div id="list"></div> I have successfully implem ...

javascripthtmljquerycss

"The CSS styling for the text input field is not being reflected in the designated

My contact form has multiple controls, but I'm having trouble changing the color of the name that is displayed in the control before a user starts typing their information. I tried using the color property, but this ended up changing the color of the ...

cssforms

utilizing checkboxes to select multiple occurrences

I have encountered an issue with my script. While it is functioning correctly for a single set of items, I am struggling to make it work with multiple sets. The checkboxes in the first set function perfectly, but I cannot seem to replicate the same behavio ...

javascriptjqueryhtmlcss

Can we use ToggleClass to animate elements using jQuery?

I have a section on my website where I want to implement an expand feature. I am currently using jQuery's toggleClass function to achieve this effect. jQuery('.menux').click(function() { jQuery(this).toggleClass('is-active&a ...

javascriptjquerycss

AngularJS ng-submit can be configured to trigger two separate actions

I am currently diving into AngularJS and working on a simple project to create an expense tracker as a beginner task. However, I have encountered some issues with my code. While I have successfully implemented most functions, I am struggling with the upda ...

javascripthtmlangularjs

Challenges encountered during the integration of jQuery UI datepicker

Recently, I added a datepicker to one of my pages and encountered some unexpected behavior when hovering over the corresponding div. Here's what I observed: In addition, I came across the following errors: <link rel="stylesheet" href="//code.jq ...

jquerycssdatepickerjquery-ui-datepickeruidatepicker

Achieve a bottom alignment in Bootstrap without using columns

I am looking to align the elements within a div to the end, but when I use Bootstrap's d-flex and align-items-end classes, it causes the elements to be split into columns. This is not the desired outcome. How can I resolve this issue? <link href ...

twitter-bootstrapcssflexboxbootstrap-4