html - href 悬停影响另一个 href

标签 html css

<分区>

我在一个容器中有两个元素。我想当第一个悬停时边框变为黄色,当悬停第二个时第一个边框再次变为黄色。

这是我的代码:

<div class="container">
    <a href="#" class="href1"></a>
    <a href="#" class="href2"></a>
</div

.href1, .href2
{
    display:block;
    width:100px;
    height:100px;
}

.href1
{
    background:red;
    border:2px solid #000;
    margin-bottom:30px;
}

.href1:hover
{
    border-color:yellow;
}

.href2
{
    background:blue;
}

.href2:hover .href1
{
    border-color:yellow;
}

我做了一个例子http://jsfiddle.net/df5dwsq8/

我不知道为什么这不起作用。如果有人可以帮助我,我将不胜感激。

最佳答案

CSS:

.href1, .href2
    {
        display:block;
        width:100px;
        height:100px;
    }

.href1
    {
        background:red;
        border:2px solid #000;
        margin-bottom:30px;
    }

.href1:hover
    {
        border-color:yellow;
    }

.href2
    {
        background:blue;
        border:2px solid #000;
    }

.href2:hover 
    {
        border-color:yellow;
    }

这是您需要的吗:http://jsfiddle.net/jani11bolkvadze/df5dwsq8/1/ ??

关于html - href 悬停影响另一个 href,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30300868/

上一篇:css - 如何为每个内联复选框设置 Razor 样式

下一篇:html - CSS 在页面中切换时

相关文章:

缩小时 HTML/CSS 会破坏 div

javascript - 固定页脚和 outerheight(true) 返回值

html - 表格出现在 Div 的顶部;如何把 table 放下

html - 如何为两列保持单个 div 和相同的高度

javascript - 为什么我的窗口调整大小事件监听器不起作用?使用 Three.js 和 Vuetify.js

html - Float left 在 ipod、android 智能手机等移动设备上不起作用

html - 使用外部 CSS 样式表仅更改 HTML 的特定部分

jquery - Bootstrap Off Canvas nav 仅在移动设备中切换

html - 使 HTML 文本有 2 种颜色而不换行

html - 在前端设计中正确设置侧边栏