製作CSS懸停元素永久的onclick

所以我創建了一些CSS動畫的一個小盒子：製作CSS懸停元素永久的onclick

.boxtest 
{ 
width: 50px; 
height: 50px; 
background-color: green; 
opacity: .2; 
transition: opacity .8s, width .8s ease-out; 
-moz-transition: opacity .8s, width .8s ease-out; 
-webkit-transition: opacity .8s, width .8s ease-out; 
-o-transition: opacity .8s, width.8s ease-out; 
} 

.boxtest:hover { 
opacity: 1; 
width: 70%; 
}

我想是的CSS懸停類保持永久的用戶一直徘徊後，他們的鼠標元素。

我想你會需要使用Javascript，但我不是專家，所以無法弄清楚正確的命令。任何幫助都是極好的！

http://jsfiddle.net/r75gC/

來源

2013-11-28 user3047182

在這裏，你去！

基本上我用jQuery向div添加一個類。您可以選擇以下兩項中的一項。

//onClick 
$(".boxtest").on("click", function() { 
    $(".boxtest").addClass('permahover'); 
}); 

//onHover 
$(".boxtest").on("mouseenter", function() { 
    $(".boxtest").addClass('permahover'); 
});

我改變了CSS來：

.boxtest:hover, 
.permahover { 
    opacity: 1; 
    width: 70%; 
}

http://jsfiddle.net/rFRc5/2/

來源

2013-11-28 20:54:28 Koralarts

真棒，非常感謝你！ – user3047182

如果你還沒有很多的經驗與JavaScript，我會建議使用JQuery。使用該包括在你的網站上的JQuery庫：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

這將讓你簡單地做（在你的HTML文件）：

<script> 
$(".boxtest").mouseenter(function() { $(".boxtest").addClass("boxtestHover"); }); 
</script>

也爲上述.boxtest變化：懸停到boxtesthover（或任何你想要的）

來源

2013-11-28 20:03:04 user3047190

很抱歉，這似乎仍然沒有工作 - 我加入您的建議，以http://jsfiddle.net/ vXuCA/1 /，但不會在用戶懸停/點擊後停留。任何想法我做錯了什麼？ – user3047182

在你的css文件中，你有改變boxtest：懸停到其他東西，在我的代碼我已經改變它boxtestHover（可能應該已經做得更清楚哈哈） – user3047190

jQuery是這個有點大材小用。

而是懸停，使用另一個類的名字，然後就這個添加的元素

onmouseover="this.className='newClassName'"

來源

2013-11-28 21:01:18 David

製作CSS懸停元素永久的onclick

回答

相關問題