Простая проблема CSS при наведении курсора? - PullRequest
Новая
       2

Простая проблема CSS при наведении курсора?

0 голосов
/ 27 июля 2010

Я не понимаю, почему мой зависший якорь не приводит к желтому окну ниже.Вот мой код: 

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
a {background-color:Blue; width:400px; height:200px;}
#hide { width:500px; height:500px;background-color:black; }
a:hover #hide {background-color:yellow; }
</style>
</head>
<body>
<a>hover</a>
<div id="hide">turn yellow</div>
</body>
</html>

Я очень устал сейчас, поэтому я должен пропустить что-то простое

Ответы [ 8 ]

2 голосов
/ 27 июля 2010

Ваш HTML должен выглядеть так, чтобы ваш CSS работал: 

<a>hover
  <div id="hide">turn yellow</div>
</a>

Но, опять же, я боюсь, это неверная разметка.Чтобы обойти это, вы могли бы обернуть это в другой div: 

<div>hover
  <div id="hide">turn yellow</div>
</div>

Но все же, если вы сделали в CSS: 

div:hover{.....}

Это не будет работать в IE6, потому чтоIE6 поддерживает :hover псевдо-селектор только для ссылок.

Итак, простое решение, если вы хотите использовать ссылку (ваша структура разметки): 

<a id="link">hover</a>
<div id="hide">turn yellow</div>

Вам нужно использовать javascript, подобный этому: 

var el = document.getElementById('link');
var dv = document.getElementById('hide');

el.onmouseover = function(){      
  dv.style.backgroundColor = 'yellow';
};

el.onmouseout = function(){
  dv.style.backgroundColor = 'blue';
};
2 голосов
/ 27 июля 2010

Вы закрываете <a> перед введением hide, поэтому путь 

a:hover #hide

никогда не будет применяться.

0 голосов
/ 27 июля 2010

a:hover #hide предназначается для элемента с идентификатором «hide» внутри любого a-элемента, например: 

<a href="...">
<span id="hide">...</span>
</a>

В вашем случае вы действительно хотите получить a:hover + #hide, посколькуозначает «элемент с идентификатором« скрыть »сразу после привязываемого элемента».

0 голосов
/ 27 июля 2010

Как отмечали другие авторы, вы можете поместить #hide div внутри ссылки; однако, если вы действительно хотите, чтобы div был вне ссылки, вы можете использовать: 

a:hover + #hide { background-color:yellow; }

Это должно стилизовать элемент с идентификатором hide, который появляется сразу после наведения ссылки.

0 голосов
/ 27 июля 2010

В современных браузерах это тоже должно работать (смежный селектор брата '+'): 

a:hover + #hide {background-color:yellow;}

Но это было бы довольно странно.Решения, в которых упоминается размещение div внутри a, является обычной формой html.Однако, чтобы сделать его действительным html, div необходимо изменить на span, а затем, если вам нужны качества блоков div, установить его на display: block.

0 голосов
/ 27 июля 2010 
a:hover #hide {background-color:yellow; }

Этого не существует, вы хотите это: 

a:hover div#hide

И вы хотите поместить свой div в якорь, если это желаемый результат: 

<a>hover
  <div id="hide">turn yellow</div>
</a>
0 голосов
/ 27 июля 2010

Я не думаю, что это будет работать.Я думаю, вам придется раскрасить его с помощью JavaScript: 

<a onmouseover="document.getElementById("hide").stylebackgroundcolor='yellow'">hover</a>
0 голосов
/ 27 июля 2010

a: hover #hide - означает, что вам нужно применить стиль к потомку, содержащемуся в теге привязки

В показанном вами HTML-коде DIV #hide не является потомком тега привязки

НТН

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...