У меня что-то вроде этого:
<article class="leading-0">
<h2>
<a href="link">link title</a>
</h2>
<ul class="actions">
<li class="print-icon">
<a ...><img...></a>
</li>
<li class="email-icon">
<a ...><img...></a>
</li>
</ul>
<dl class="article-info">
<dt class="article-info-term">...</dt>
<dd class="hits">...</dd>
</dl>
<p>...</p>
</article>
Когда вы ul.tools
li
на ul.tools
я хочу ul.tools
элемент h2
.
Я был бы рад, если бы кто-нибудь мог помочь и посмотреть, возможно ли это или нет.
Я помню, как это делалось раньше, но не могу вспомнить об этом.
Проблема в том, что вы не можете делать это только с помощью CSS.
Хотя вы используете селектор CSS для выбора элемента, селекторы не могут выбрать родительский элемент, другими словами, вы не можете каким-либо образом отменить элемент...
Либо вы можете выбрать дочерний элемент или соседний элемент, используя +
Итак, в вашем случае
<h2><a> link </a></h2>
<ul class='tools'>
<li> tool 1 </li>
</ul>
Когда вы используете .tools li:hover
, теперь вы не можете выбрать какой-либо другой элемент вне li
, вы можете выбрать смежный li
при наведении курсора первого li
или вы можете выбрать любой дочерний элемент в li
.
Поэтому, как только вы выбираете элементы, вы не можете выбрать предыдущий элемент, если на том же уровне, и вы не можете выбрать родительский элемент, и вы не можете выбрать смежный элемент для родителя.
Если вы хотите это сделать, вы можете использовать Javascript или jQuery для этого.
Поскольку вы теперь открыты для решения jQuery, вы можете использовать
$("ul.actions li").hover(function(){
$(this).parent().prev().find('a').toggleClass("hover");
});
Здесь, в приведенном выше коде, я сначала нацеливаю li
используя это ключевое слово, чем, я ищу его родительский элемент, который выберет ul
, затем я использую .prev()
чтобы искать предыдущий элемент сиблинга, а в конце мы используем .find('a')
для целевой a
элемент, вложенный внутри h2
Если вы хотите использовать единственный способ CSS, чем лучше всего сделать, это обернуть h2
и ul
в одном элементе, скажем, что элемент div
с class
говорит .wrapper
чем вы можете использовать селектор, например
.wrapper:hover h2 a {
color: red;
}
.tools:hover
него будет .tools:hover
элемент ul
, некоторые свойства также будут наследоваться элементом li
, так что это селектор потерь, лучше всегда быть конкретным.
вам нужно использовать оператор +
, вот пример: http://jsfiddle.net/TheBanana/JaEGF/
#div1:hover + #div2{
background:green;
}
Попробуйте этот код CSS:
article ul.tools li:hover{
color:green;
}
article h2 {
color:red;
}
h2
при наведении курсора ul.tools li
чего нет.