ansaurus

Question

CSS: Hover one element, effect for multiple elements??

Answer 1

A:

You'd need to use javascript to accomplish this, I think.

jQuery:

$(function(){
   $("#innerContainer").hover(
        function(){
            $(#innerContainer").css('border-color','#FFF');
            $(#outerContainer").css('border-color','#FFF');
        },
        function(){
            $(#innerContainer").css('border-color','#000');
            $(#outerContainer").css('border-color','#000');
        }
    );
});

Adjust the values and element id's accordingly :)

inkedmn 2009-09-22 20:26:36

Nice, really nice! What about if I have multiple section for same class names? Now I've tryed that for four whit same class names and when I hover one, those all changes??Should I make running number front of all sections? Does jquery have wildcard support anykind? (okey, I try just google for it! ;))Thanks..

Marko 2009-09-22 21:07:45

Answer 2

+1 A:

This is not difficult to achieve, but you need to use the javascript onmouseover function. Pseudoscript:

<div class="section ">

<div class="image"><img src="myImage.jpg" onmouseover=".layer {border: 1px solid black;} .image {border: 1px solid black;}" /></div>

<div class="layer">Lorem Ipsum</div>

</div>

Use your own colors. You can also reference javascript functions in the mouseover command.

eykanal 2009-09-22 20:30:32

+1 for using class CSS change instead of element one as another example.

DVK 2009-09-22 20:36:05

This is working too, thanks!I just try to avoid inline coding as much I can.. ;)

Marko 2009-09-22 21:10:49

:) Yeah, that's what you get when I type quick 'n dirty code.

eykanal 2009-09-24 16:25:03

Answer 3

+1 A:

This worked for me in Firefox and Chrome and IE8...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; 
<html>
    <head>
     <style type="text/css">
     div.section:hover div.image, div.section:hover div.layer {
      border: solid 1px red;
     }
     </style>
    </head>
    <body>
     <div class="section">
      <div class="image"><img src="myImage.jpg" /></div>
      <div class="layer">Lorem Ipsum</div>
     </div>
    </body>
</html>

... you may want to test this with IE6 as well (I'm not sure if it'll work there).

Steve Wortham 2009-09-22 20:38:25

Actually it can work in IE8, it seems. Adding the Doctype made the difference. So there -- a pure CSS solution. ;)

Steve Wortham 2009-09-22 20:58:10

Answer 4

+7 A:

You dont need javascript for this...

some css would do it. Here is an example

<html>
  <style type="text/css">
    .section { background:#ccc; }
    .section { background:#ddd; }
    .section:hover img { border:2px solid #333; }
    .section:hover .layer { border:2px solid #F90; }
  </style>
</head>
<body>
  <div class="section">
    <img src="myImage.jpg" />
    <div class="layer">Lorem Ipsum</div>
  </div>
</body>
</html>

corymathews 2009-09-22 20:58:17

Okey, here's winner!! :) I didn't know that if i have something:hover, I can continue that whit another element! (somthing:hover .second)..Everyday you learn something new.. Thanks x10

Marko 2009-09-23 08:28:24

I also didn't know this. Thanks for your help.

chrisdew 2010-10-28 13:34:41

Answer 5

+1 A:

I think the best option for you is to enclose both divs by another div. Then you can make it by CSS in the following way:

<html>
<head>
<style>
  div.both:hover .image { border: 1px solid blue }
  div.both:hover .layer { border: 1px solid blue }
</style>
</head>

<body>
<div class="section">

<div class="both">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

</div>
</body>
</html>

Viliam 2009-09-22 21:03:46

ansaurus

tags:

views:

answers:

CSS: Hover one element, effect for multiple elements??

related questions