在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 問一個關于點擊狀態(tài)樣式的問題

問一個關于點擊狀態(tài)樣式的問題

1. 問題：

父元素的樣式里有.parent:active,當點擊的時候會更換背景顏色；
想要實現(xiàn)的效果是：點擊某個特殊的子元素的話，不想觸發(fā)父元素的更換背景顏色，但是其他元素就正常觸發(fā)。請問怎么做到呢？純css可以做到嗎？
demo的頁面結構和樣式是這樣的：

<!DOCTYPE html>
<html>    
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style> 
    .parent{
        height: 100px;
        background: #ccc;
    }
    .parent:active {
        background: #aaa;
    }
    .no-active{
        height: 40px;
        width: 40px;
        background: #219;
        color: #fff;
    }
</style>
</head>
<body>

    <div class="parent">
        <div class="no-acitve">hello</div>
        <div class="other">active</div>
    </div>

</body>
</html>
回答
編輯回答
小曖昧

CSS現(xiàn)在是沒有父代選擇器，但是呢，有一定的辦法可以取巧模擬
css:


.parent {
    position: relative;
    height: 100px;
    z-index: 1;
}

.replace {
    width: 100%;
    height: 100px;
    background: #ccc;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
}

.other:active+.replace {
    background: #aaa;
}

.replace:active {
    background: #aaa;
}

dom：<div class="parent">

    <div class="no-acitve">hello</div>
    <div class="other">active</div>
    <div class="replace"></div>
</div>

具體詳見 鏈接描述

2017年6月27日 01:16
編輯回答
旖襯

加個判斷不就好了么

if(!e.target.className === “特殊標簽class”) {
    ...
}
2018年2月9日 03:42
編輯回答
熟稔

如果你想讓這個特殊的子元素被active的時候沒有任何反應，可以試試CSS:pointer-events
當然，要注意一下兼容性。

2018年3月26日 14:23