:hover not working - HTML / CSS

I have a CSS file that contains a hover element, and it is not working in ANY browser (FF3.5, IE6, GC1, SF3 O9)

Expand|Select|Wrap|Line Numbers

 .controls

{

position: absolute;

right: 1px;

top: 2px;

height: 15px;

width: 15px;

background: url('JSi/closeO.png');

}

.controls:hover

{

background: url('JSi/close.png');

}

Sep 25 '09 #1

Subscribe Post Reply

12022

byteit101

Oops, forgot the page:

Expand|Select|Wrap|Line Numbers

 <html>

    <head>

        <style>

        .controls

        {

            position: absolute;

            right: 1px;

            top: 2px;

            height: 15px;

            width: 15px;

            background-image: url('close.png');

        }

        .controls :hover

        {

            background-image: url('close2.png');

        }

        </style>

    </head>

    <body>

        <div style="position: absolute; width: 300px; left: 100px; top: 100px;">

            <div style="background-color: #0ff">

                Demo

            <div class="controls"/>

        </div>

    </body>

</html>

Sep 26 '09 #2

Dormilich

8,658

Expert Mod 8TB

I’d say your code works (except IE). you just forgot one thing, to see a change, there must be something to see first.

Sep 26 '09 #3

byteit101

Well, it does not work for me.
of note, I don't know what i did, but now It works in firefox if i change the class to a id. I still need it to be a class thoug

Expand|Select|Wrap|Line Numbers

   <html>

       <head>

       <style>

     #controls

     {

            position: absolute;

            right: 1px;

            top: 2px;

            height: 15px;

            width: 15px;

            background-image: url('http://hotmail.com/favicon.ico');

        }

        #controls:hover

        {

            background-image: url('http://google.com/favicon.ico');

        }

        </style>

    </head>

    <body>

        <div style="position: absolute; width: 300px; left: 100px; top: 100px;">

            <div style="background-color: #0ff">

                Demo

            <div id="controls"/>

        </div>

    </body>

</html>

Sep 26 '09 #4

byteit101

Is this a browser error, or am I doing it wrong?

Sep 28 '09 #5

Dormilich

8,658

Expert Mod 8TB

you should check if <div /> has any visible area, e.g. by applying a border (or using Firebug).

Sep 29 '09 #6

ziycon

384

256MB

Instead of using:

Expand|Select|Wrap|Line Numbers

 .controls:hover

{

 background: url('JSi/close.png');

}

try:

Expand|Select|Wrap|Line Numbers

 .controls a:hover

{

 background: url('JSi/close.png');

}

Also you want to make sure all your DIVs have a closing tag.

Sep 29 '09 #7

Dormilich

8,658

Expert Mod 8TB

@ziycon
if you’re using real XHTML, you’re prompted with an error, if they don’t. HTML will auto-close such elements.

Sep 29 '09 #8

drhowarddrfine

7,435

Expert 4TB

Using <div /> is not valid in HTML and may be interpreted differently in browsers, if at all. That works in XHTML and XML but don't use it in HTML.

Sep 30 '09 #9

Similar topics

Hover emulating in IE

by: Cezar | last post by:

Hello. How can simple emulating in IE this class ? ..example:hover{ border: 1px solid #696969; } Greets, Cezar.

HTML / CSS

DOM Anchor Hover attribute

by: skipc | last post by:

I posted a recent message regarding navigating a table using arrow keys. I've got the code for the navigation working. My table contains rows of links (anchors). I can get to a specific link...

Javascript

CSS Hover Problem in IE

by: fehays | last post by:

Hello, I'm having a problem with the css hover effect in IE. I have an <a> tag with the following CSS: a.subNavItem { display:block; color:#464645; padding:2px 7px 4px 6px;...

HTML / CSS

Dropdown navigation not working with IE7

by: nishac | last post by:

Can anyone suggest me how to make my drop down menu work in IE7 too.Its working in other browsers.On mouse over the submenus should be displayed.Am attaching my css code hereby.Anyone please check...

HTML / CSS

"tiered" multi-level menu not working in IE

by: Paul | last post by:

Below is the html and css. It works in Firefox but not IE. When you click on "Your Links", it should cause a new menu "system" to open up to the right of the "Your Links" with two menu options. ...

HTML / CSS

Image Links and Hover not working on IE

by: Cate Archer | last post by:

I want to have a border around an image that changes color when the mouse hovers over it. The following code works perfectly in FireFox but not in Internet Exploiter. The text link changes color...

HTML / CSS

1/2 IE6:Hover stops working in Ajax

by: Sigilaea | last post by:

My previous post got squashed because m post is too long. Sorry for that: I have an AJAX page with a CSS menu at the top. My problem is the hover functionality stops working after someone clicks...

Javascript

Hover submenus not working with FF or Opera

by: Meri | last post by:

Hello Everybody on the internet seems to think this is a problem with IE but for me it works fine with IE, but the submenus do not appear with Firefox andOpera. The html is a simple list with...

HTML / CSS

CSS Float left not working on dropdown menu bar

by: Darren Laverick | last post by:

Hi I am trying to make dropdown menus for my website and am puzzled as to why my float left, in my container div, is not working (it is going underneath). Here is the code for both files. i hope...

HTML / CSS

Why does two level Drop Down Menu not working in IE and works fine with all browsers?

by: Ash Mar | last post by:

Hi Every one :) My Issue is the sub menu level 2 Not working in Internet Explore but it's working perfect in all other browsers. I Spend more than 6 hours and could not find the solution guys if...

HTML / CSS

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice