Как изменить один элемент во время зависания над другим

Я рассмотрел несколько других вопросов, но я, похоже, не знаю никого из них, так что вот моя проблема, я хотел бы иметь div или span, когда вы наведете над ним область, которая появится и будет как падение.

Например, у меня есть div, и я хочу нависнуть над ним и показать ему некоторую информацию об элементе, который я навел над

<html>
<head>
<title>Question1</title>

<styles type="css/text">

#cheetah {
    background-color: red;
    color: yellow;
    text-align: center;
}

a {
    color: blue;
}

#hidden {
    background-color: black;
 }

 a:hover > #hidden {
    background-color: orange;
    color: orange;
}
</styles>

</head>
<body>
<div id="cheetah">
   <p><a href="#">Cheetah</a></p>
</div>
<div id="hidden">
   <p>A cheetah is a land mammal that can run up 2 60mph!!!</p>
</div>
</body>
</html>

Но это не работает, я не знаю, почему... и если есть способ сделать это в css, я хотел бы знать, но мне нужны любые предложения.

Ответ 1

Вы можете достичь этого в CSS только в том случае, если скрытый div является дочерним элементом элемента, который вы используете для зависания:

http://jsfiddle.net/LgKkU/

Ответ 2

Вы не можете воздействовать на не-дочерний элемент, используя :hover из CSS2, который поддерживается всеми распространенными браузерами.

Вы можете влиять на элемент sibling с помощью селекторов CSS2.1, например:

a:hover + .sibling { ... }

Однако это работает только для прямых братьев и сестер. Это означает, что у вас может быть такой HTML:

<p><a href="#">Cheetah</a> <span class="sibling">Blah Blah Blah</span></p>

Обратите внимание, что a и span являются прямыми братьями и сестрами.

Вот скрипка, показывающая работающих братьев и сестер: http://jsfiddle.net/vUUxp/

Тем не менее, не все браузеры поддерживают селектор CSS2.1, поэтому вам нужно решить, на основе вашей целевой аудитории, если вы можете использовать это или нет.

Изменить. Исправлена моя ошибка в версии CSS для селектора +: это 2.1, которая определяет его, а не CSS3. Я также добавил ссылку, показывающую поддержку браузера. В противном случае ответ будет таким же.

Ответ 3

Или, если вы открыты для него, используйте jQuery.

Что-то вроде этого будет работать:

$("#element") // select your element (supports CSS selectors)
    .hover(function(){ // trigger the mouseover event
        $("#otherElement") // select the element to show (can be anywhere)
            .show(); // show the element
    }, function(){ // trigger the mouseout event
        $("#otherElement") // select the same element
            .hide(); // hide it
    });

И не забудьте обернуть это в функцию готовности DOM ($(function(){...}); или $(document).ready(function(){...});).