onmouseenter/onmouseleave動畫適用不起作用

我一直在努力工作幾個小時，但我無法讓它工作。

我的目標是在element1's :: before和element1上放一個動畫。我試過了:: before和：hover thingy這個簡單的CSS技巧..但它不起作用。onmouseenter/onmouseleave動畫適用不起作用

HTML <div id="fc3"><div class="f_bb">Hover this</div> <div class="f_bloc">This should appear with an animation</div></div>

CSS /不能把它在這裏沒有竊聽了，不知道爲什麼/

JS /相同/

https://jsfiddle.net/5Lf76r7h/

任何想法？謝謝。 :)

UPDATE 全部CSS嘗試：https://jsfiddle.net/5Lf76r7h/3/ 更新2 https://jsfiddle.net/5Lf76r7h/4/

來源

2016-12-14 mSyx

可憐的使用懸停。儘管這是一個可怕而不完整的例子，但我做了一個小小的更新（https://jsfiddle.net/5Lf76r7h/2/）。 – PHPglue

祝賀PHPGlue，你糟糕的嘲笑我，你的「更新」不能按預期工作。下一次，甚至不打擾回覆。謝謝:) – mSyx

或多或少的工作版本，只需添加另一個div並修改一些元素即可。 https://jsfiddle.net/5Lf76r7h/4/ 已解決。 :) – mSyx

我已經使用jQuery的動畫處理的mouseenter和鼠標離開來實現相同的。請參閱此琴：
https://jsfiddle.net/rawatdeepesh/2f41k6m5/

這裏是爲您的設計代碼：

<div id="fc3"> 
    <div class="f_bb">Hover this 
    <div class="progress" style="border:1px blue solid;width:10px;height:5px;background-color:yellow;display:none"> 

    </div> 
    <div class="f_bloc" style="display:none">This should appear with an animation</div> 
</div> 
</div>

如果你需要更多的動畫：一個http://www.w3schools.com/jquery/jquery_animate.asp

來源

2016-12-16 19:45:26 rawatdeepesh

非常感謝好友。 :) – mSyx

onmouseenter/onmouseleave動畫適用不起作用

回答

相關問題