Closed EYHN closed 6 years ago
~~Failure using jQuery: ~~
$(document).ready(function(){
document.getElementById("${config.id}").mouseover(function(){
$(this).fadeTo(600,0.95);
});
document.getElementById("${config.id}").mouseleave(function(){
$(this).fadeTo(500,0.7);
});
${config.opacity}
${config.fadeToOpacity}
});
Object doesn't support property or method 'mouseover'
Author:
Don't use jQuery!
~http://www.w3school.com.cn/css3/css3_transition.asp~ ~http://www.w3school.com.cn/cssref/selector_hover.asp~ ~http://www.w3school.com.cn/cssref/pr_transition.asp~ ~Trying to use CSS3 transition to achieve it~ Failed to use CSS3 transition
<div id="hexo-helper-live2d">
<canvas id="${config.id}" width="${config.width * config.scaling}" height="${config.height * config.scaling}" class="${config.className}"></canvas>
</div>
<style>
#${config.id}{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: fixed;
width: ${config.width}px;
height: ${config.height}px;
opacity:${config.opacityDefault};
${config.opacityDefault != config.opacityHover ? `transition:opacity 0.95s ease-out;
-moz-transition:opacity 0.95s ease-out; /* Firefox 4 */
-webkit-transition:opacity 0.95s ease-out; /* Safari and Chrome */
-o-transition:opacity 0.95s ease-out; /* Opera */`: ``}
${config.position}: ${config.horizontalOffset}px;
z-index: 999;
pointer-events: none;
bottom: ${config.verticalOffset}px;
}
${config.opacityDefault != config.opacityHover ? `#${config.id}:hover{
opacity:${config.opacityHover};
}`: ``}
</style>
<script src="/live2d/device.min.js"></script>
<script type="text/javascript">
(function(){
if(device.mobile()){
${config.mobileShow ? `document.getElementById("${config.id}").style.width = '${config.width * config.mobileScaling}px';
document.getElementById("${config.id}").style.height = '${config.height * config.mobileScaling}px';
document.write('<script type="text/javascript" src="/live2d/script.js"><\\/script>');
document.write('<script>loadlive2d(${JSON.stringify(config.id)}, ${JSON.stringify(url.resolve("/live2d/assets/", config.model + ".model.json"))}, 0.5)<\\/script>');` : ``}
}else{
document.write('<script type="text/javascript" src="/live2d/script.js"><\\/script>');
document.write('<script>loadlive2d(${JSON.stringify(config.id)}, ${JSON.stringify(url.resolve("/live2d/assets/", config.model + ".model.json"))}, 0.5)<\\/script>');
}
})();
</script>
pointer-events: none;
will conflict withhover
, because if pointer-events: none;
exists, no event can the canvas received.
应该在 bundle.js 中。 那个 device.js 也是 包含在bundle中
https://www.npmjs.com/package/device.js
import { device } from 'device.js';
默认 opacity 最好为 1,透明的不好看。
或者默认 opacity 比较低,鼠标放上去 opacity 增加。