Question

我有一个SVG圈子和一个较小的CSS圈子（用border-radius: 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>

问题是，在这种情况下，当鼠标位于圆圈的矩形边界上时，鼠标事件将被移动，而不是仅仅显示在页面上的位置。

现在，奇怪的是事件被绑定到圈子（#top_circle），而不是img标签，当img标签不存在时，这可以正常工作。说img标记与border-radius: 50%一样并且没有绑定鼠标事件也很重要。

还有一点需要注意：问题在Chrome上重复，但在FF上没有。

以下是相关的CSS：

.over_center {
    position:absolute;
    top: 50%;
    left:50%;
    height: 66%;
    width: 66%;
    margin-top: -33%;
    margin-left: -33%;
    text-align: center;
    background-position: center;
    background-size: 100%;
}

#top_circle {
    color: #111;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    background-color: #333;
    font-family: Century Gothic , Verdana, sans-serif;
}

#track_image_holder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

#track_image_holder > img {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    left: 0;
    z-index: 0;
}

#time_holder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
  text-shadow:1px 1px 1px #000;
  color:#fff;
}

#timer:hover {
    cursor: pointer;
  background:red;

}

另一个小注：整个项目都是免费的jQuery，必须保持这种状态。

这里有一个包含完整代码的演示：http://memescloud.com/mediaplayer/

以下是一些最相关的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...
}

边界半径和鼠标悬停事件

0 个答案: