Question

我想将hover用于标记内的几个div。

例如这里

<a href="#">
<div class="nextmatch_wrap">
   <div class="clan12w">
      <div class="TeamLogos">
         <div class="Team" id="TeamContainer">
            <img src="#">
         </div>
      </div>
   </div>
   <div class="clan12w">
      <div class="TeamLogos">
         <div class="Team" id="TeamContainer">
            <img src="#">
         </div>
      </div>
   </div>
</div>

如果您将鼠标悬停在标签上，我希望彩色边框显示在＆＃34; TeamContainer＆＃34;和＃34; TeamLogos＆＃34;

我对css不好，但我尝试过这样的

a nextmatch_wrap, :hover #TeamContainer, a nextmatch_wrap, :hover .r-home-team{
border:solid 1px #25c2f5;
}

它可以工作，但不知何故，当你的鼠标在页面的任何地方时，悬停就像是一直打开但是当你将鼠标移出浏览器页面时，悬停消失了，不知道吗？

Answer 1

您的选择器不正确且<a>标记未关闭。选择器中的>表示在<a>悬停时应用效果，<a>后跟<div>。

以下是您可以做的事情。

＆＃13;

a:hover > div {
  border:solid 1px #25c2f5;
}

＆＃13;

<a href="#">
  <div class="nextmatch_wrap">
     <div class="clan12w">
        <div class="TeamLogos">
           <div class="Team" id="TeamContainer">
              <img src="http://placehold.it/100x100" />
           </div>
        </div>
     </div>
     <div class="clan12w">
        <div class="TeamLogos">
           <div class="Team" id="TeamContainer">
              <img src="http://placehold.it/100x100" />
           </div>
        </div>
     </div>
  </div>
</a>

＆＃13;

Answer 2

这是你需要准确使用的css：

a:hover #TeamContainer, a:hover .TeamLogos{
    border:solid 1px #25c2f5;
}

＆＃34;，＆＃34;在css的选择器中意味着您将相同的样式应用于多个元素，并使用它来分隔这些元素（即：在我的情况下，我将该边框样式应用于每个#TeamContainer位于<a>标记内，正在悬停，并且.TeamLogos标记内的每个<a>都会悬停。）

你应该在被悬停的元素之后立即添加:hover，尽管该元素会受到影响。

您的风格选择器的问题在于，您之间只有:hover逗号，因此选择任何悬停的元素。

请勿忘记关闭<a>代码。

CSS - 在标记内的元素上使用悬停？

2 个答案: