LinuxQuestions.org

LinuxQuestions.org (/questions/)
-   Programming (https://www.linuxquestions.org/questions/programming-9/)
-   -   CSS element interaction (https://www.linuxquestions.org/questions/programming-9/css-element-interaction-407036/)

thew00t 01-23-2006 01:38 PM

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:


Code:

<style>
<!--
span.filter {
  background-color:#f0f0f0;
}
//-->
</style>

<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 {
  background-color:#ffffff;
 }
}

is there a way to do this without using Javascript and onMouseOver or whathaveyou?
-w00t

FlowState 01-23-2006 02:23 PM

I believe this capability is part of CSS 3.0, which as far as I know, is still in development.

AdaHacker 01-23-2006 04:43 PM

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:
Code:

<style type="text/css">
  span.filter {
    background-color: #f0f0f0;
  }
  filter:hover {
    background-color: #ffffff;
  }
</style>
...
<span class="filter">
<input type='checkbox' class='cbox' />Checkbox
</span>


Spudley 01-24-2006 07:42 AM

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. :)

thew00t 01-24-2006 10:23 AM

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


All times are GMT -5. The time now is 02:55 AM.