Javascript 边界半径和鼠标悬停事件

我有一个SVG圆圈和一个较小的CSS圆圈（使用

边框半径：50%

）覆盖在上面。CSS圆圈有一个

mouseover

和

mouseout

事件，当鼠标位于圆圈上方时，会触发一些所需的行为

在某些情况下，内部CSS圆圈将包含一个附加的

div

和一个

img

标记。CSS圆圈的HTML代码如下所示：

<div id="top_circle" class="over_center" style="line-height: 186.66667px;">
    <div id="track_image_holder">
        <img src="http://lorempixel.com/400/200" style="opacity: 1;">
    </div>
    <div id="time_holder">
        <span id="timer" style="font-size: 46.66667px;">02:30</span>
    </div>
</div>

还有一个小提示：整个项目是jQuery自由的，必须保持这种方式

这里有一个包含完整代码的演示：

以下是一些最相关的js：

function CAP_Player(data){

    //some code...

    this.mouseHoveringOnCenter = false;

    //some more code...

    //The function below is being called before user interaction is available.    
    this.beReady = function() {
        if(this.loaded === 0) {
            //some code....

            this.container.style.width = this.size + "px";
            this.container.style.height = this.size + "px";
            this.container.style.position = "relative";

            this.topCircle = this.container.appendChild(document.createElement("div"));
            this.topCircle.setAttribute("id", "top_circle");
            this.topCircle.setAttribute("class", "over_center");
            this.topCircle.style.lineHeight = this.size * (2/3) + "px";

            //HERE ARE THE EVENT LISTENERS:
            this.topCircle.addEventListener("mouseover", function() {
                this.mouseHoveringOnCenter = true;
                this.timer.innerHTML="◼";
            }.bind(this));
            this.topCircle.addEventListener("mouseout", function() {
                this.mouseHoveringOnCenter = false;
                this.timer.innerHTML="";
            }.bind(this));

            //some more code...
        return this;
    };

        //some more code...
}

---

你能贴一把小提琴吗？那么你在这里问的到底是什么问题？你说问题。。。什么问题？@ochi，更好，我上传了一个演示（见我的编辑）@Tom。。一个JSFIDLE会更好。。。只是saying@Tom，尝试将溢出：隐藏在顶部圆圈上。

function CAP_Player(data){

    //some code...

    this.mouseHoveringOnCenter = false;

    //some more code...

    //The function below is being called before user interaction is available.    
    this.beReady = function() {
        if(this.loaded === 0) {
            //some code....

            this.container.style.width = this.size + "px";
            this.container.style.height = this.size + "px";
            this.container.style.position = "relative";

            this.topCircle = this.container.appendChild(document.createElement("div"));
            this.topCircle.setAttribute("id", "top_circle");
            this.topCircle.setAttribute("class", "over_center");
            this.topCircle.style.lineHeight = this.size * (2/3) + "px";

            //HERE ARE THE EVENT LISTENERS:
            this.topCircle.addEventListener("mouseover", function() {
                this.mouseHoveringOnCenter = true;
                this.timer.innerHTML="◼";
            }.bind(this));
            this.topCircle.addEventListener("mouseout", function() {
                this.mouseHoveringOnCenter = false;
                this.timer.innerHTML="";
            }.bind(this));

            //some more code...
        return this;
    };

        //some more code...
}