Question

我有这个div：

.slicknav_nav {
    touch-action: pan-y;
    display: block;
    position: absolute;
    top: 102px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 1000;
    width: 20%;
    background: #fff;
    overflow-y: scroll;
}

而且，我想要的是当我单击使该div出现的按钮时，我希望此div突出显示，而其他颜色变暗。与youtube页面相同，当您单击平滑菜单时，其高亮处和其他区域变暗。

Answer 1

没有适当的Minimal, Verifiable and Complete Example很难说，但这是一个简化的解决方案：

let btn = document.getElementById('hi-activate');
let tohighlight = document.getElementsByClassName('highlight');
let allothers = document.getElementsByTagName('div');

btn.addEventListener('click', function(){
  
  for(let i = 0; i < allothers.length; i++){
    allothers[i].style.opacity = "0.3";
    allothers[i].style.background = "#dedede";
  }

  for (let i = 0; i < tohighlight.length; i++){
    tohighlight[i].style.opacity = "1";
    tohighlight[i].style.background = "#98FB98";
    
  }
});

div, button {
  margin: 5px;
  padding: 5px;
  border: 1px solid black;
}

<div>Some content</div>
<div>Another content</div>
<div class="highlight">Highlightable content</div>
<div>And some more content</div>
<div class="highlight">Also highlightable</div>
<div>And the end</div>

<button id="hi-activate">Click me!</button>

要了解已完成的操作，请将EventListener附加到按钮（或其他按钮）上，并在触发按钮时将style设置为元素，同时更改其余所有元素。

很明显，要实现YouTube的效果，您需要做更多的样式设置，但这应该可以方便地说明如何实现。

Answer 2

如果您使用的是此类html，则可以尝试以下代码

<div class="slicknav_nav ">
    <div class="entry-content">
         <div class="expose">something</div>
         <div class="expose">something</div>
         <div class="expose">something</div>
    </div>
</div>

CSS：

.slicknav_nav {
    background:rgba(0,0,0,0.3);
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:99998;
    pointer-events:none
}
.expose{
    background-color:red;
    position:relative;
}

JS：

$('.entry-content').hover(function() {
    $('.slicknav_nav').fadeIn(300);
}, function() {
    $('.slicknav_nav').fadeOut(300);
});

$('.expose').hover(function(e) {
    $(this).css('z-index', '99999');
},function(e) {
    $(this).css('z-index', '1');
});

突出显示div，并使页面上的其他内容变暗

2 个答案: