Question

我有一个附带javascript的按钮。当您单击该按钮时，将出现一个隐藏的框，当您单击另一个时，第一个框将替换为第二个框，依此类推。当我的按钮处于活动状态时，当该框可见时，它会产生阴影。我不想要那个！我尝试使用以下css代码：

.nav > button{
    width: auto;
    font-family: 'OpenSansBold';
    color: #000;
    padding: 3px;
    border: none;
    margin-right: 10px;
    margin-top: 5px;
    font-size: 15px;
    text-align: left;
    background-color: #fff;
}

button:hover{
    cursor: pointer;
    border: none;
    color: #7b1a2c;
}
button:visited{
    font-family: 'OpenSansBold';
    box-shadow: none;
}

button:active{
    box-shadow: none;
}

但没有运气。按钮在激活时是否有另一个CSS代码？

我对javascript一无所知，只是复制粘贴这个东西。也许这是可以在js代码中修复的东西？为了以防万一，我可以告诉你们：

$('div.box').slice(1).addClass('hidden');

$('.nav').children('button').on('click', function(){
    // console.log('klikk');
    $(this).data('content');

    $('.box').not('hidden').addClass('hidden');
    $( $(this).data('content')).removeClass('hidden');
});

Answer 1

也许您谈论outline属性或:focus伪类？

试试这个：

button:active, button:focus {
  box-shadow: none;
  outline: 0;
}

Answer 2

为了给你一个有用的例子，请使用以下代码片段，我认为这表现得像你想要的那样。

要完全删除阴影，只需删除第二个JS规则。

// :active rules
$('button').on('mousedown', function () {
  $(this).css('box-shadow', 'none');
});

// :visited rules
$('button').on('mouseup', function () {
  $(this).css('box-shadow', '10px 10px 5px #888888');
});

button {
    width: 300px;
    height: 100px;
    background-color: yellow;
    box-shadow: 10px 10px 5px #888888;
}

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

<body>
    <button>test</button>
</body>

在活动时从按钮中删除阴影

2 个答案: