зона подсветки объекта больше, чем его активная область

[zabeg]

Привет! Я новичок и не силен в "веб-верстальческой" терминологии, но есть у меня задачка, которую попробую изложить доступным мне языком на бумаге:

И ещё раз понятным текстом :

Хочется добиться средствами CSS, чтобы зона подсветки объекта была больше его активной области.

Заранее спасибо за помощь и подсказки!

[Zippovich]

попробуйте использовать box-shadow, например:

a:hover {
    -webkit-box-shadow: 0px 0px 14px 0px #000;
    box-shadow: 0px 0px 14px 0px #000;
}

[Yazon_Nile]

или джиквери

html

<div class="some">
    <a href="#" class="link">text</a>
</div>

$('.link').hover(function(){
    $(this).parent().css({'background':'#f00'});
});

[Bonzash]

А почему не сделать ссылку внутри дива, и ховером для дива задавать цвет.

a:hover div {
  backgronud-color: #ff0000;
}

[Yazon_Nile]

Bonzash,

ойойойойойййоооойй..

Да вы что

То что вы написали - невалидно и будет работать только для дива вложенного в ссылку. А у нас наоборот. Ссылка в диве, на который срабатывает какое-то событие при ховере на ссылку.

Без джс обратиться к родителю нельзя никак.

[zabeg]

спасибо, Zippovich, Yazon_Nile и Bonzash за скорые ответы!

box-shadow - как раз то, что нужно. убрал размытие тени и получилась рамка в точности, как на картинке.

Zippovich, у вас в примере атрибут продублирован дважды. подразумевается, что один из них понятен для вебкит-браузеров, а другой - для... ммм... остальных?

может ли быть проблема с отображением бокс-шэдоу в разных браузерах?

может стоит опробовать вариант от Yazon_Nile с джейкваери, как более кроссбраузерный? (не знаю пока, как он выглядит. функционал box-shadow вполне устраивает)

[SelenIT]

То что вы написали - невалидно

Уже валидно. Остальное всё верно.

P.S. А надо ли в этой задаче зацикливаться на отношениях "предок-потомок"?

[Yazon_Nile]

http://jsfiddle.net/E5kQK/24/