Troubleshooting: Issue with CSS hover effect not functioning on a div element

I'm having trouble getting my CSS to respond to a :hover event.

Here's the CSS code I have:

<style>
    .hidescroll
    {
    }    
        .hidescroll :hover 
        {
            overflow-x: auto;
        }
</style>

And here's the HTML code:

<div class="hidescroll" style="width:100%; height:100px; background-color:green;  overflow-y:hidden; overflow-x:hidden;">
    <div style="width:300%; height:100px; background-color:red; ">abc</div>
</div>

I was expecting the scrollbar to appear when I hover over the div, but it doesn't. Why is that? (I even tried adding div before :hover, but that didn't work either.)

htmlcss

Answer №1

When it comes to specificity, inline styles take precedence. If you want to override them for hover effects, you'll need to use !important in your CSS or consider moving the styles out of inline format. Personally, I suggest opting for the latter option.

Answer №2

style="..." on the <div class="hidescroll" has priority over the independent CSS rule in the <style> section.

Considering there is already a CSS rule for hidescroll, it is advisable to place those styles within that rule instead of using inline styling.

<style>
.hidescroll
{
    width:100%;
    height:100px;
    background-color:green;
    overflow-y:hidden;
    overflow-x:hidden;
}    
.hidescroll:hover 
{
    overflow-x: auto;
}
</style>

<div class="hidescroll">
    <div style="width:300%; height:100px; background-color:red;">abc</div>
</div>

It would be more optimal to define the styles for the inner div within a separate style rule.

Please note — !important should ideally be utilized by user agents; employed by end-users to override site styles, such as when using browser plugins like Stylebot to enhance legibility through adjustments like font size and contrast).

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

Tips for utilizing div as a dropdown menu

I have a challenge with the following code and I am looking to make it function like a dropdown one by one For example: ABCD ABCD 1234 ABCD 1234 abcd <ul class="first"> <li class="first-a"><a href="https://someurl">ABCD&l ...

jqueryhtmlcss

`Flexbox: Achieving Alignment of Items``

I am looking to align items in a specific way. My goal is to have 4 items in one row, and then the remaining 3 items in the next row, all centered. Despite setting the width at 25%, I am encountering some issues with alignment. Please check out the code ...

htmlcssflexbox

Web element not detected within Span Tag

Within my HTML, I have the following: <span class="login-link">Log in</span> The code snippet I am using is: driver.findElement(By.cssSelector("#login > span")).click(); I have tried utilizing xPath, cssSelector, and id, but none of them ...

javacssseleniumxpathselenium-webdriver

Is it possible to move the login button to the right side of the screen?

I'm attempting to move the Login menu all the way to the right on the navigation bar. Currently, all the menu items are aligned to the left and I need to align the Login menu to the right. However, I'm unsure of where to begin. The navigation me ...

htmlcss

Problem with displaying images in Bootstrap layout

For the past day, I've been trying to resolve an issue. The code I'm currently working with is: <div class="container"> <div class="row"> {% for post in posts %} <div class="col-md-6"> <div class="thumbnail"> ...

htmlcssdjangotwitter-bootstrap-3

The visual appearance of an element generated by Javascript is not currently displayed

I recently completed a project where I used JavaScript to create an element and fetch data from Firebase Firestore database, then appended it to the HTML body. The structure included a div serving as the container box with object.className, an h4 for the t ...

javascripthtmlcssfirebase

Top method for creating a structured list based on file paths

My Ruby on Rails page is struggling with slow performance. It's currently generating a hierarchical, unordered list using recursive SQL calls, which has proven to be inefficient. After optimizing the SQL query to retrieve the necessary hierarchy infor ...

htmlruby-on-railsrubyalgorithm

How come the array's length is not appearing on the browser screen?

Code: initialize: function() { this.todos = [ {id: 100, text: 'Rich'}, {id: 200, text: 'Dave'} ]; }, activeTodos: function() { this.todos = this.todos.length(function() { return this.todos; }); ...

javascripthtmlreactjsreturn

Transform in-line elements using specific HTML attributes using CSS styling

Can you achieve this with links (a[href="/"]{_/*CSS declarations.*/_})? For instance: #example > .meow span[style="color:red;"] { text-transform: lowercase; } #example > .woof span[title="I'm a dog."] { color: blue; text-decorat ...

htmlcssattributes

What is the most effective method for arranging divs in a horizontal layout?

When it comes to creating a horizontal three-column div layout, there are a variety of methods to consider: Position: relative/absolute; Float: left/right; with margin: 0 auto; for center div Float: left; for all divs Display table / table-cell What do ...

javascriptcss

Extracting the id of an element using jQuery

The desired outcome is for the code to print the id of the selected div, but it's not working as expected. I've reviewed it multiple times but couldn't pinpoint the error. Any assistance would be greatly appreciated. Here is the HTML: < ...

javascriptjqueryhtml

The canvas elements remain hidden from view

When I draw 3 elements on my canvas and display it on this page (), everything works perfectly. However, when I try to include that same page in an index page by loading it into a div using the route2 button (), only the outline that I drew in my HTML code ...

htmlcanvas

Creating a trendy Bootstrap 4 inline progress bar alongside an <h3> heading

Attempting to display a Bootstrap 4 progress bar inline with the <h3> tag, the bar appears slightly higher than the <h3> as shown below: https://i.sstatic.net/alZGN.png The approach was to use the row class with two sections. The HTML: <d ...

htmltwitter-bootstrapprogress-barbootstrap-4

``Consolidate and modify multiple records at once with a single click

Take a look at this code snippet for creating a table: while($record=mysql_fetch_array($myData) ) { echo "<form action=mydata3.php method=post>"; echo"<tr>"; echo "<td>" . $record['Id'] . "</td>"; echo "& ...

phphtmlmysql

Bootstrap 4: Spacing between columns within a row

This design is almost complete, but I am facing difficulties in adding gutters between column divs in a row (on the right side, green). Additionally, configuring the width of the div that holds all the rows (blue) is proving to be challenging. You can find ...

cssbootstrap-4column-widthgutter

Extracting data from several pages using the same URL, but with varying ajax responses

I've been attempting to scrape all the reviews for a specific book on Goodreads.com. url= https://www.goodreads.com/book/show/320.One_Hundred_Years_of_Solitude?ac=1&from_search=true The initial scrapping of the first page was successful using Py ...

pythonhtmlajaxweb-scrapingbeautifulsoup

Struggling with identifying errors in the Javascript code for my assignment

My code is giving me trouble and I could really use some assistance You can find my code in this GitHub folder: link. To see the project in action, visit this page on GitHub Pages: link. The task involves iterating over an array of names and printing eit ...

javascripthtmldebuggingweb

What is the best way to connect an HTML file to a controller in Angular.js?

When developing an app module using the MEAN stack with MVC, I created a folder named AppModules. Inside AppModules, there is a folder called search, which contains three subfolders: models, views, and controllers. I've written an HTML file in the vie ...

javascripthtmlangularjsmodel-view-controllermean-stack

Add navigation dots to the slider in order to align them with the specified div element

Visit this JSFiddle link for the code <html> <link href="./style.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script&g ...

javascripthtmljquerycss

Executing a function only on one click

Recently diving into the world of JavaScript, I attempted to create a button that would log "hey" in the console upon being clicked. However, I encountered an issue where it logs "hey" before clicking the button and then does nothing when the button is act ...

javascripthtmlonclick