html - 带有 anchor 标记的列表项的CSS元素+元素选择器

<分区>

我试图在悬停列表项时更改国家/地区 的字体颜色。我提到了这个工作codepen但在我的场景中它不起作用。我找不到我在哪里犯了错误这是我的代码

a{
text-decoration:none;
}
li{
list-style:none;
}
.dropdown-menu>li>a:hover + .dropdown>.dropdown-toggle{
    color: yellow!important;
}

     <span>
         <li class="dropdown inline">
            <a class="dropdown-toggle" href="#">Country <span class="caret"></span></a>(Color will be changed on hover of countries)
            <ul class="dropdown-menu">
               <li><a href="#">India</a></li>
               <li><a href="#">USA</a></li>
               <li><a href="#">Japan</a></li>
               <li><a href="#">Korea</a></li>
            </ul>
         </li>
      </span>

最佳答案

看下面的片段，这是你想要的吗

a{
text-decoration:none;
}
li{
list-style:none;
}
.dropdown:hover  >.dropdown-toggle{
    color: yellow!important;
}

<span>
         <li class="dropdown inline">
            <a class="dropdown-toggle" href="#">Country <span class="caret"></span></a>(Color will be changed on hover of countries)
            <ul class="dropdown-menu">
               <li><a href="#">India</a></li>
               <li><a href="#">USA</a></li>
               <li><a href="#">Japan</a></li>
               <li><a href="#">Korea</a></li>
            </ul>
         </li>
      </span>

关于html - 带有 anchor 标记的列表项的CSS元素+元素选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47119162/

上一篇：javascript - 如何创建 javascript 文件的外部列表

下一篇：css - 在 JavaFX 中，当使用 id 选择器在其他地方选择了类的某些节点时，CSS 类选择器不起作用？

相关文章：

html - 绝对定位的输入标签悬停问题

javascript - 使用 jQuery 更新 <div> 时，CSS 规则不会应用于新内容

html - Bootstrap 按钮和导航栏不起作用

html - 悬停状态的第 n 个子公式 - 除第一个元素外的所有元素

css - CSS3的:root pseudo class and html?有什么区别

javascript - 如果文本字符串长度超过 3 个字符，则隐藏 div

javascript - 如何在 dropzone.js 中设置上传按钮

html - 自动调整两个 block 元素的大小

javascript - jQuery 克隆() : original content's radio button clicking show/hide not working

javascript - 在固定 div 上滚动时防止正文滚动