Struggling to Make Hover Effect Work on a Wrapper Div

Question

Struggling to Make Hover Effect Work on a Wrapper Div

I could really use some assistance.

Struggling to figure out how to make the hover effect work correctly on a wrapper/container DIV.

CSS:

#myhover:hover {
    border: 1px solid red;
}

HTML:

<div id="myhover" style="background: #ffffff; 
      width: 177px; height: 20px; border: 1px solid #808080;">
    <div style="float: left;">
        <input id="refdocs" style="padding-left: 4px; padding-right: 3px; 
                  height: 15px; width: 158px; border: none;" type="text">
    </div>
    <div style="line-height:18px; font-size: 11pt;  color: #779297;">+</div>
</div>

html css

Answer 1

Answer №1

Inline styles can cause unintended overrides because they are the most specific in the cascade. To avoid this issue, move your styling for #myhover into a separate style sheet.

For example:

#myhover {
    background: #ffffff; 
    width: 177px; 
    height: 20px; 
    border: 1px solid #808080;
}

Example on jsfiddle: http://jsfiddle.net/va8Bz/

Answer 2

Inline styles can cause unintended overrides because they are the most specific in the cascade. To avoid this issue, move your styling for #myhover into a separate style sheet.

For example:

#myhover {
    background: #ffffff; 
    width: 177px; 
    height: 20px; 
    border: 1px solid #808080;
}

Example on jsfiddle: http://jsfiddle.net/va8Bz/

Answer 3

Answer №2

The CSS styles in your style attribute are taking precedence over the stylesheet selectors, as they are more specific.

You have a few options to address this issue:

Transfer your styles from the style attribute to the external stylesheet.
Transfer your styles from the style attribute to the external stylesheet.
Use !important with the style declarations that need to override those in the style attribute.

I recommend moving your styles from the style attribute to a separate stylesheet for better organization and management.

For example: http://jsfiddle.net/Y7NW9/

Answer 4

The CSS styles in your style attribute are taking precedence over the stylesheet selectors, as they are more specific.

You have a few options to address this issue:

Transfer your styles from the style attribute to the external stylesheet.
Transfer your styles from the style attribute to the external stylesheet.
Use !important with the style declarations that need to override those in the style attribute.

I recommend moving your styles from the style attribute to a separate stylesheet for better organization and management.

For example: http://jsfiddle.net/Y7NW9/

Answer 5

Answer №3

To achieve your desired styling, it is recommended to move all of your CSS rules into a separate stylesheet rather than using inline styles.

You can also simplify your HTML markup as follows:

<div class="container">
    <input class="refdocs" type="text">
    <div class="icon">+</div>
</div>

Next, in your external CSS file:

.container {
    display: inline-block;
    position: relative;
}

.input-wrapper {
    float: left;
}

.refdocs {
    border: 1px solid #808080;
    padding: 2px;
    padding-right: 14px;
    margin: 0;
}

.refdocs:hover {
    border: 1px solid red;
}

.icon {
    font-size: 11pt;
    position: absolute;
    top: 3px;
    right: 5px;
}

Check out this demo for a live example

Answer 6

To achieve your desired styling, it is recommended to move all of your CSS rules into a separate stylesheet rather than using inline styles.

You can also simplify your HTML markup as follows:

<div class="container">
    <input class="refdocs" type="text">
    <div class="icon">+</div>
</div>

Next, in your external CSS file:

.container {
    display: inline-block;
    position: relative;
}

.input-wrapper {
    float: left;
}

.refdocs {
    border: 1px solid #808080;
    padding: 2px;
    padding-right: 14px;
    margin: 0;
}

.refdocs:hover {
    border: 1px solid red;
}

.icon {
    font-size: 11pt;
    position: absolute;
    top: 3px;
    right: 5px;
}

Check out this demo for a live example

Answer 7

Answer №4

Here is the solution to your query that was addressed in a previous post:

#add {
    float: right;
    width: 20px;
    height: 20px;
    cursor: pointer;
    text-align: center;
}
#add:hover {
    color: #f00;   
}

http://jsfiddle.net/kUSBM/

Your feedback on the provided solutions is highly appreciated.

Answer 8

Here is the solution to your query that was addressed in a previous post:

#add {
    float: right;
    width: 20px;
    height: 20px;
    cursor: pointer;
    text-align: center;
}
#add:hover {
    color: #f00;   
}

http://jsfiddle.net/kUSBM/

Your feedback on the provided solutions is highly appreciated.

Struggling to Make Hover Effect Work on a Wrapper Div

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Error: jQuery Datatables Library encounters an issue with undefined variable "oColumn"

Tips for removing two specific "th" elements from a table that is generated dynamically

What is the best way to choose a random image in a Django template?

Embed a FLV video within a jQuery tooltip

Oops! Smarty encountered a fatal error that wasn't caught

What could be causing the html.fromstring function to malfunction in my code?

Customize Swiper js: How to adjust the Gap Size Between Slides using rem, em, or %?

The presentation of the Google graph with dynamically changing data appears to be displaying inaccurately

Changing the color of a div's text based on its content with CSS

CSS animations for loading page content

Challenges with the dropdown menu navigation bar

How can I fix the position of the close button when using the paper component of a modal in material ui to ensure responsiveness on the screen

What could be the reason for the failure of background: url(local.png)?

Make a hyperlink in Internet Explorer redirect to open in Mozilla Firefox

The page background appears to be incomplete in its coloring

Adjust the size of the canvas object/figure

BASH-SHELL SCRIPT: Display a specific portion of content from a file

How to store a collection of web elements into an array using Python

"Escape the confines of traditional div sections with the dynamic features of

Leveraging ng-repeat in Angular