Question

I would like to apply style to hovered links in a list, but only if there is not image inside <a> element.

The markup is like this:

<div id="leftcolumn">
  <ul>
    <li><a href="http://google.com">google</a></li>
    <li><a href="http://google.com"><img src="http://cso.cz/wpimages/cz2.gif"></a></li>
  </ul>
</div>

and my css:

div#leftcolumn ul a:hover{ 
  background-color: #F8F8F8; 
  color: Black; 
  border-bottom: 1px solid Black; 
}

I have tried this css, but to no avail:

div#leftcolumn ul a:hover < img{ 
  background-color: #F8F8F8; 
  color: Black; 
  border-bottom: 1px solid Black; 
}

Here is the jsfiddle

上应用样式

Answer 1

你不能在CSS中基于它的子元素设置元素的样式，你可以做的是为<a>标签分配一个特殊的类来保存图像并防止它的样式：

<div id="leftcolumn">
      <ul>
        <li><a href="http://google.com">google</a></li>
        <li><a href="http://google.com" class="withImage"><img src="http://cso.cz/wpimages/cz2.gif"></a></li>
      </ul>
</div>

div#leftcolumn ul a:not(.withImage):hover{ 
  background-color: #F8F8F8; 
  color: Black; 
  border-bottom: 1px solid Black; 
  border-top: 1px solid black; 
}

Answer 2

我怀疑这在纯CSS中是可行的。

但是，您可以将文字换成<span>并仅在那里应用规则，例如：

<div id="leftcolumn">
  <ul>
    <li><a href="http://google.com"><span>google</span></a></li>
    <li><a href="http://google.com"><img src="http://cso.cz/wpimages/cz2.gif"></a></li>
  </ul>
</div>

CSS：

div#leftcolumn ul a:hover > span { 
  background-color: #F8F8F8; 
  color: Black; 
  border-bottom: 1px solid Black; 
}

this

Answer 3

将 .non-img 添加到没有img的li中 n使用 .non-img

进行css

＆＃13;

div#leftcolumn ul li.non-img a:hover{ 
  background-color: #F8F8F8; 
  color: Black; 
  border-bottom: 1px solid Black; 
  border-top: 1px solid black; 
}

＆＃13;

<div id="leftcolumn">
      <ul>
        <li class="non-img"><a href="http://google.com">google</a></li>
        <li><a href="http://google.com"><img src="http://cso.cz/wpimages/cz2.gif"></a></li>
      </ul>
</div>

＆＃13;

CSS：仅在<a> without inner <img/>

3 个答案: