Latest LQ Deal: Complete CCNA, CCNP & Red Hat Certification Training Bundle
Go Back > Forums > Non-*NIX Forums > Programming
User Name
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.


  Search this Thread
Old 01-23-2006, 01:38 PM   #1
LQ Newbie
Registered: Feb 2004
Distribution: Slackware 9.1 and BSD 5.2
Posts: 28

Rep: Reputation: 16
CSS element interaction

I'm not sure that CSS can do what I want, but then again CSS is pretty powerful. Here is my situation:

span.filter {

<input type='checkbox' class='cbox'><span class='filter'>Checkbox</span>

Is there a way to use css so that, upon hovering over the checkbox, the
background color for the span will change? I was thinking something like:

input.cbox:hover {
 span.filter {
is there a way to do this without using Javascript and onMouseOver or whathaveyou?
Old 01-23-2006, 02:23 PM   #2
LQ Newbie
Registered: Jul 2005
Distribution: Gentoo, LFS
Posts: 13

Rep: Reputation: 0
I believe this capability is part of CSS 3.0, which as far as I know, is still in development.
Old 01-23-2006, 04:43 PM   #3
Registered: Oct 2001
Location: Brockport, NY
Distribution: Kubuntu
Posts: 384

Rep: Reputation: 31
I don't think CSS has a way to control elements of non-child elements like that. However, you could work around it by simply putting the input element inside the span, like this:
<style type="text/css">
  span.filter {
    background-color: #f0f0f0;
  filter:hover {
    background-color: #ffffff;
<span class="filter">
<input type='checkbox' class='cbox' />Checkbox
Old 01-24-2006, 07:42 AM   #4
Registered: Mar 2003
Location: Berkshire, England.
Distribution: SuSE 10.0
Posts: 299

Rep: Reputation: 32
This is a job for Javascript.

Firstly, you're trying to affect one element according to the hover flag of another: this won't work. (you might get some kind of result if the affected element is a child of the checkbox, but I wouldn't bet on it).

Secondly, although hover works universally in all other browsers, Microsoft Internet Explorer only supports CSS hover on <a> tags; hover attributes on all other tags are ignored by IE. Therefore, you're better off using Javascript for all hover effects, except actual hyperlinks.

When browsers start supporting CSS3, it may be possible to do what you want, but for now stick with Javascript for this one; it's not that much to code.

Hope that helps.
Old 01-24-2006, 10:23 AM   #5
LQ Newbie
Registered: Feb 2004
Distribution: Slackware 9.1 and BSD 5.2
Posts: 28

Original Poster
Rep: Reputation: 16
AdaHacker, I comepletely didn't even think about putting it inside the <span> tags. Wow. Thanks everyone for your timely responses.


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
python os interaction help JoeUser11 Programming 6 06-22-2005 11:46 PM
website and linux interaction mikepengelly Linux - General 1 09-14-2004 02:01 PM
No desktop interaction Iriel Linux - Newbie 1 11-11-2003 10:05 AM
Backend -Frontend Interaction unbeknown Linux - Software 1 07-29-2003 03:33 PM
fdisk without user interaction tiger Linux - Software 1 09-10-2001 02:06 AM > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 07:12 PM.

Main Menu
Write for LQ is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration