javascript - 通过操纵不透明度突出显示菜单中的元素

Question

html:

<div id="menu" class="menu">
    <ul class="headlines">
        <li id="item1" onclick="checklist(this)">
            <button onclick="myFunction()">g</button>
        </li>
        <li id="item2">
            <button onclick="myFunction2()">a </button>
        </li>
        <li id="item3">b </li>
        <li id="item4">c </li>
        <li id="item5">d </li>
        <li id="item6">e </li>
        <li id="item7">f </li>
    </ul>
</div>

CSS:

lu, li {
    list-style-type: none;
    font-size: 1.5em;
    height: 40px;
    width: 150px;
    text-align: right;
    border-style: none;
}

.menu {
    width: 150px;
    height: 350px;
}

.menu li {
    position: relative;
    top: 150px;
    bottom: 0;
    left: 725px;
    right: 0;
    margin: auto;
    border-style: none;
}

.permahover li {
    opacity: 1;
    left: 10%;
}

.headlines li {
    font-size: 1.5em;
    color: #000000;
    transition: all 0.5s;
    cursor: pointer;
}

.headlines:hover li {
    /* PARENT HOVER */
    opacity: 0.4;
    cursor: pointer;
    /* Dim all */
}

.headlines li:hover {
    /* SINGLE HOVER */
    opacity: 1;
    /* Max one */
    color: #000000;
    cursor: pointer;
}

在当前代码中，当用户将鼠标悬停在一个元素上时，菜单中其他元素的不透明度将降低。我怎样才能在单击一个元素后执行相同的过程。通过单击一个元素，它将保持其不透明度，但未单击的元素将降低不透明度，从而突出显示所选元素。

Answer 1

您将需要 javascript *。例如:

var $li = $('.headlines li').click(function() {
    var state = !$(this).hasClass('active');
    $(this).parent().toggleClass('active', state);
    
    $li.removeClass('active');
    $(this).toggleClass('active', state);
});

ul, li {
    list-style-type: none;
    font-size: 1.5em;
    height: 40px;
    width: 150px;
    text-align: right;
    border-style: none;
}
.menu {
    width:150px;
    height: 350px;
}
.menu li {
    position: relative;
    right: 0;
    margin: auto;
    border-style:none;
}
.permahover li {
    opacity: 1;
    left: 10%;
}
.headlines li {
    font-size:1.5em;
    color:#000000;
    transition: all 0.5s;
    cursor: pointer;
}
.headlines:hover li,
.headlines.active li {
    opacity:0.4;
    cursor: pointer;
}
.headlines li:hover,
.headlines li.active {
    opacity: 1;
    color:#000000;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="menu">
    <ul class="headlines">
        <li id="item1" onclick="checklist(this)">
            <button onclick="myFunction()">g</button>
        </li>
        <li id="item2">
            <button onclick="myFunction2()">a</button>
        </li>
        <li id="item3">b</li>
        <li id="item4">c</li>
        <li id="item5">d</li>
    </ul>
</div>

---

_{* 从技术上讲，可以使用纯 CSS 来实现，但 HTML 结构将变得复杂且不那么语义化。}