Конкретный селектор CSS - элемент объемного звучания

Question

У меня есть следующая разметка:

<a><div class="action_button">Log In</div></a>

У меня есть стиль на .action_button, чтобы увеличить его и иметь фон и т. Д.

У меня также есть стиль на .action_button:hover длясделать так, чтобы у него был более светлый фон и вставная тень, когда пользователь наводит на него курсор.

Как применить стилизацию к тегу привязки, который его окружает, но только когда он окружает .action_button div.

Например, это работает:

a:hover {
    text-decoration:none;
}

Но это влияет на все ссылки, я хочу затрагивать только те, которые окружают .action_button div.

Answer 1

Почему бы просто:

<a class="action_button"></a>

CSS:

.action_button {
    text-decoration: none;
    display: block; 
    /* other styles */
}

Я не вижу смысла иметь DIV внутри A. Если вы хотите, чтобы привязка была блоком, просто установите display: block на эту привязку напрямую.

Answer 2

Вы можете использовать JQuery для добавления класса к каждому «a», у которого есть div с классом .action_button

$("a").has("div.action_button").addClass("myclass");

И затем, очевидно, используйте этот класс для выбора ваших тегов «a».

http://api.jquery.com/has/

Answer 3

Я думаю, вам нужно добавить класс к элементу "a", который содержит кнопку. Вы не можете создать селектор, который работает в другом направлении.

Answer 4

Я бы немного изменил код - <a> должен быть вложен в <div>, так как div является блочным элементом, а тег привязки встроен.

Тогда вы можете просто использовать следующее:

<style>
    .action_button a       {text-decoration:underline; }
    .action_button a:hover {text-decoration:none; }
</style>

Answer 5

a .action_button:hover{
    text-decoration:none;
}