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。例如：

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

<小时/> _{*从技术上讲，它可以用纯CSS来实现，但HTML结构将变得复杂而不是语义。}

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

1 个答案: