Question

每当我在侧边栏中悬停锚标记时，我都希望div更改其样式。这是我的HTML代码：

.sidebar ul li  a:hover + .transparentbutton {
  opacity: 1.0;
}

.transparentbutton{
    transform: translateY(40px);
    z-index: -4;
    height: 38px;
    border: 1px solid white;
    width: 100%;
    background: white;
    opacity: 0.0;
    transition: ease 200ms;
    border-radius: 20px;
}

<div class="sidebar">
    <ul>
    <div class="sideblock">
    <div>
    <div class="transparentbutton"></div>

        <li><a class="dashboard" href="#">Dashboard</a></li>
    </div>
    <div>
    <div class="transparentbutton"></div>

        <li><a class="ideas" href="#">Ideas</a></li>
    </div>
    <div>
    <div class="transparentbutton"></div>


        <li><a class="teams" href="#">Teams</a></li>

    </div>
    <div>
    <div class="transparentbutton"></div>

        <li><a class="participants" href="#">Participants</a></li>
    </div>
    </div>
    </ul>
</div>

因此，当我将其悬停在锚点上时，什么也没有发生，div位于锚点标记的后面，它的不透明度为0.0，并且每当我悬停该锚点标记时，我的不透明度应该为0.6。

Answer 1

无法使用CSS选择上一个元素。这就是为什么我放下.transparentbutton元素的原因。然后我借助flexbox进行了置换。 CSS中也有错误。我修好了。

.sidebar ul .sideblock div li:hover + .transparentbutton {
  opacity: 1.0;
}

.sidebar ul .sideblock div {
display:flex;
flex-direction:column-reverse;
}

.transparentbutton{
    transform: translateY(0px);
    z-index: -4;
    height: 38px;
    border: 1px solid white;
    width: 100%;
    background: white;
    opacity: 0.0;
    transition: ease 200ms;
    border-radius: 20px;
}

<div class="sidebar">
    <ul>
    <div class="sideblock">
    <div>
    

        <li><a class="dashboard" href="#">Dashboard</a></li>
        <div class="transparentbutton">BUTTON</div>
    </div>
    <div>
    

        <li><a class="ideas" href="#">Ideas</a></li>
        <div class="transparentbutton">BUTTON</div>
    </div>
    <div>


        <li><a class="teams" href="#">Teams</a></li>
        <div class="transparentbutton">BUTTON</div>

    </div>
    <div>

        <li><a class="participants" href="#">Participants</a></li>
        <div class="transparentbutton">BUTTON</div>
    </div>
    </div>
    </ul>
</div>

如何通过悬停锚来更改不同div的样式属性？

1 个答案: