Вопросы Теги

CSS: Парение один элемент, эффект для нескольких элементов?

Я ищу метод для своей колеблющейся проблемы.

<div class="section">

<div class="image"><img src="myImage.jpg" /></div>

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

</div>

Теперь, оба класса, изображение и слой, имеют границы. У обоих есть различный цвет для нормального и при наведении курсора. Там путь состоит в том, чтобы сделать его, поэтому если я толплюсь класс слоя, и слой и отображаю класс, колеблющийся, цвет рамки активен? И наоборот?

76
задан ag93 14 September 2019 в 09:12
поделиться

5 ответов

You don't need JavaScript for this.

Some CSS would do it. Here is an example:

    
  
Lorem Ipsum
179
ответ дан 24 November 2019 в 11:08
поделиться

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

11
ответ дан 24 November 2019 в 11:08
поделиться

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>
10
ответ дан 24 November 2019 в 11:08
поделиться

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.

8
ответ дан 24 November 2019 в 11:08
поделиться

Думаю, для этого вам понадобится JavaScript.

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');
        }
    );
});

Отрегулируйте значения и идентификаторы элементов соответственно :)

3
ответ дан 24 November 2019 в 11:08
поделиться