0

好的，我用 soundmanager2 创建了一个播放器。现在它播放了，我进一步定制了它，但有一个问题我似乎无法解决。当用户将鼠标悬停在播放器上时，文本会下降，但一旦他们离开盒子并且音乐播放/暂停，文本就会再次上升，直到我将鼠标悬停在播放器上。我无法弄清楚是什么导致了chrome，因为它在firefox和ie中运行良好。

这里的页面，这样你就可以更好地理解我的意思：http ://tinyurl.com/agvmue​​o

现在，我不知道该怎么做，这真的让我很沮丧。

这里是 CSS，以防万一：

.ui360,
.sm2-360ui{position:relative}
.ui360,.sm2-360ui{min-width:50px;min-height:50px}
.sm2-360ui{width:50px;height:50px}
.ui360,.ui360 *{vertical-align:middle}
.sm2-360ui{position:relative;display:inline-block;float:left;display:inline}
.sm2-360ui.sm2_playing,.sm2-360ui.sm2_paused{z-index:10}
.ui360 a{float:left;display:inline;position:relative;color:#000;text-decoration:none;left:3px;top:18px;text-indent:50px}
.ui360 a.sm2_link{text-indent:0}
.ui360 a,.ui360 a:hover,.ui360 a:focus{padding:2px;margin-left:-2px;margin-top:-2px}
.ui360 a:hover,.ui360 a:focus{outline:none}
.ui360 .sm2-canvas{position:absolute;left:0;top:-15px}
.ui360 .sm2-timing{position:absolute;display:block;left:0;top:0;width:100%;height:100%;margin:0;font:11px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;color:#666;text-align:center;line-height:50px}
.ui360 .sm2-timing.aligntweak{text-indent:1px}
.ui360 .sm2-cover{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;display:none;background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}
.ui360 .sm2-360btn{position:absolute;display:block;top:50%;left:50%;width:50px;height:50px;margin-left:-25px;margin-top:-25px;cursor:pointer;z-index:3}
.ui360 .sm2-360data{display:inline-block;font-family:helvetica}
.sm2-inline-block .ui360 .sm2-360btn,.ui360 .sm2-360ui.sm2_playing .sm2-360btn,.ui360 .sm2-360ui.sm2_paused .sm2-360btn{width:22px;height:22px;margin-left:-11px;margin-top:-11px}
.ui360 .sm2-360ui.sm2_playing .sm2-cover,.ui360 .sm2-360ui.sm2_paused .sm2-cover{display:block}
.ui360 .sm2-360ui.sm2_playing .sm2-timing{visibility:visible}
.ui360 .sm2-360ui.sm2_buffering .sm2-timing{visibility:hidden}
.ui360 .sm2-360ui .sm2-timing,.ui360 .sm2-360ui .sm2-360btn:hover + .sm2-timing,.ui360 .sm2-360ui.sm2_paused .sm2-timing{visibility:hidden}
.ui360 .sm2-360ui.sm2_dragging .sm2-timing,.ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover + .sm2-timing{/* paused + dragging */visibility:visible}
.ui360 .sm2-360ui.sm2_playing .sm2-360btn,.ui360 .sm2-360ui.sm2_dragging .sm2-360btn,.ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover,.ui360 .sm2-360ui.sm2_dragging .sm2-360btn-playing:hover{background:transparent;cursor:auto}
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn,.ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover{background:transparent url(../images/icon_loading_dots.gif) no-repeat 50% 50%;opacity:0.5;visibility:visible}
.sm2-inline-list .ui360,.sm2-inline-block .ui360{position:relative;display:inline-block;float:left;_display:inline;margin-bottom:-15px}
.sm2-inline-list .ui360{margin-right:-2px}
.sm2-inline-block .ui360{margin-right:8px}
.sm2-inline-list .ui360 a{display:none}
ul.ui360playlist{list-style-type:none}
ul.ui360playlist,ul.ui360playlist li{margin:0;padding:0}
div.ui360 div.metadata{display:none}
div.ui360 a span.metadata,div.ui360 a span.metadata *{vertical-align:baseline}
.ui360-vis,.ui360-vis .sm2-360ui,.sm2-inline-list .ui360-vis{width:180px;height:150px}
.ui360-vis{position:relative;padding-top:1px;padding-bottom:1px;margin-bottom:-18px;padding-left:248px;margin-left:0;background-position:22.6% 50%}
.sm2-inline-list .ui360-vis{cursor:pointer}
.ui360-vis a{font:14px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;white-space:nowrap;text-indent:0;top:46%}
.sm2-inline-list .ui360-vis a{line-height:256px;top:auto}
.ui360-vis .sm2-360ui{margin-left:-256px}
.ui360-vis .sm2-timing{font:bold 24px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;color:#333;text-align:center;line-height:150px;text-indent:0}
.sm2-inline-list .ui360-vis,.sm2-inline-list .ui360-vis .sm2-360ui{margin-left:0}
.sm2-inline-list .ui360-vis{transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:15px 15px 15px 15px;-moz-border-radius:15px;-webkit-border-radius:15px 15px 15px 15px;-o-border-radius:15px 15px 15px 15px;margin:10px;border:2px solid #e6e6e6;padding-left:0;background-position:50% 50%;overflow:hidden;behavior:url(PIE.htc);position:relative}
.sm2-inline-list .ui360-vis .sm2-360ui{margin-left:-1px;margin-top:-1px}
.sm2-inline-list .ui360-vis:hover{border-radius:100px 100px 100px 100px;-moz-border-radius:100px;-webkit-border-radius:100px 100px 100px 100px;-o-border-radius:100px 100px 100px 100px;overflow:hidden;behavior:url(PIE.htc);position:relative}
.sm2-inline-list .ui360-vis a{position:absolute;display:inline;left:0;bottom:0;top:1px;width:100%;height:100%;height:256px;overflow:hidden;transition:all 1s;color:#333;font-size:16px;margin:0;padding:0;line-height:250px;line-height:250px;text-align:center;transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s}
.sm2-inline-list .ui360 a:hover{background-color:transparent;line-height:800px;line-height:800px}
.sm2-inline-list .ui360-vis:hover .sm2-360ui,.sm2-inline-list .ui360-vis a.sm2_link:hover,.sm2-inline-list .ui360-vis a.sm2_link:active,.sm2-inline-list .ui360-vis a.sm2_link:focus{}
.sm2-inline-list .ui360-vis:hover a.sm2_link{line-height:800px;line-height:800px}
.ui360-vis .sm2-360btn,.ui360-vis .sm2-360ui.sm2_paused .sm2-360btn,.ui360-vis .sm2-360ui.sm2_playing .sm2-360btn{width:48px;height:48px;margin-left:-24px;margin-top:-24px}
.ui360-vis,.ui360-vis .sm2-360ui.sm2_paused .sm2-360btn,.ui360-vis .sm2-360btn-default{background:transparent url(../images/360-button-vis-play.png) no-repeat 50% 50%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABuVBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADv7++lpaXr6+uAgIDk5OQzMzPt7e1tbW3n5+dgYGDW1tZNTU10dHQ5OTnw8PCvr6/e3t6JiYlAQEDb29vo6OgrKyuqqqrq6uq4uLjf399AQEDGxsbq6uqAgIDY2Nje3t61tbXp6enU1NTu7u7r6+vl5eXt7e2fn5/n5+fDw8Ph4eHv7+/t7e3CwsLW1tbu7u7b29vw8PDm5uYgICDp6enY2Nji4uLo6Ojm5uakpKTS0tLPz8/h4eHw8PDs7Ozj4+Pa2trg4ODx8fHT09Pk5OTPz8/S0tLBwcGmpqawsLCOjo7h4eHn5+fo6OgAAADY2NjNzc3n5+cAAADd3d3Gxsbu7u7t7e0AAADX19fl5eXi4uLf39/Hx8fn5+fs7Ozg4ODR0dHX19e4uLjv7+/z8/P09PTy8vL19fXv7+/n5+fx8fH29vbs7Ozq6urm5ubo6Ojw8PDu7u7p6enr6+sAAAB/f3/Z2dn39/fh4eGOjo4ODg7t7e3l5eWWlpba2tqjo6NVVVXk5OTe3t65ubnMzMzExMTf39/GxsampqZiYmJNcTiZAAAAbXRSTlMAAQIEAwcFCAb5EdAImAXpB6oIUAoLCfsgZQ0EVrsGEr4ZYQgbsgpUYxikNd/aatQQli+R7rlUUdas6+8I+VaFruoOOV/S8Nq5sWL8UqmKUFsuHyTcrtsJm0z7C49V3NMKkdKXuk7S7oVeVSv7tAAEVwAAAu5JREFUeF6llmVz3DwURmNLsr1pmJmZmZmxzMwsybS8gXJfhl9cKXbHEK+TmZ4P/nDnOXN1NbalHD8CQ7QRGDmhnIQhBDYQnkhheRECSVIQQrLMHookAciUkHhBw1zVwuLShcJIpPDC0uJC1VxDQTaFx1srSvM3DUxU1TRVlWBjM7+0opUrQaupLSnrLK7ELIepwaCYmbiyuLOspJY38eeLykdGxzDhYQfKCmOjI+VFPkMQYF7NZD0l2DgFJrR+siYPegxBzBvqeoQxpgGw8qOuoTz3HGw9udUPCaFZIORhdS5blZOHjXWDBIdABusanb0S4MpqEw4XcNPqCrQFQQTN+XwPQ8CY5jcDUbB3KLdlg6hnQDZacqEgWA3a2rF6Jri9zWohwI6dXXK2QHZ3OqBw0qC7B6vnAPd0sxZMkHr7VNPD34YZgNrXK3EBSgPU9HJ4eIQDDDogQS4ow4QJxy4+MmKs4oYJZFhhggjQuMoKHoHzn3bsQx1HQOTClOkXLP6lviZTtjCjmn7B5g/izqszliBHTB+HDhl3PSJbwnxSS3n45HDkVLXkvCWg5Uws7eHgJ98/uKqxzLI9w3o6oXuwhd+OPNVEet0WtnU9/sWNJfz1u6cY1/VtLghQuRgk/PmBmT7hogJPXo3L8YQed3Nw8PWfuB89Eb8scUGUrl33DfH/N93BGeH6NUnkArh1O5FOuNETp2GR27cAE/iaJu6mz8HdCQnan+i96XQmdgaZ9PQ9+xMVoPJgNhrNhBKNzj5Q+E/AavH4SSz6OZRo7Mlj3oDDp7jyPJoKJfr8CpvAOUrQi6eppJaVZOrpCwTdP1cgr93UjKxoN9dka2KX8ealZtBADO3lG2+e7xRAd7Y0igOg2tYdBKD/CBIBenf/lYGJD2y8uv8OgaBDDkry3v57SlQXhL7f35OlwJOXGUBBl571JykmzCIE02T/s0tIASyf/R6Arr59fcM62G+8fnsVhdwFwq4Ov345Of/15wd0RYY81HHUTQAAAABJRU5ErkJggg==);background-image:url(../images/360-button-vis-play.png);_background:transparent url(../images/360-button-vis-play.gif) no-repeat 50% 50%;cursor:pointer}
.ui360-vis:hover .sm2-360btn,.ui360-vis .sm2-360btn-default:hover,.ui360-vis .sm2-360ui.sm2_paused .sm2-360btn:hover{background:transparent url(../images/360-button-vis-play-light.png) no-repeat 50% 50%;_background:transparent url(../images/360-button-vis-play.gif) no-repeat 50% 50%;cursor:pointer}
.ui360-vis .sm2-360ui.sm2_playing .sm2-360btn:hover,.ui360-vis .sm2-360btn-playing:hover{background:transparent url(../images/360-button-vis-pause-light.png) no-repeat 50% 50%;_background:transparent url(../images/360-button-vis-pause-light.gif) no-repeat 50% 50%;cursor:pointer}
.ui360-vis{background-position:21% 50%;_background:transparent url(../images/360-button-vis-play.gif) no-repeat 21% 50%}
.ui360-vis .sm2-360btn-default{_background:transparent url(../images/360-button-vis-play.gif) no-repeat 50% 50%}
.ui360-vis .sm2-360ui.sm2_dragging .sm2-360btn{visibility:hidden}
4

1 回答 1

0

It's not because of your css, it's because of your javascript. The text is supposed to do that because it disappears on hover, and it returns to it's default state when you are not hovering. And it happens in Firefox also.
What you have to do is display: none on the <a href="#">Text</a> when the user plays the audio, and display: block when it stops.

于 2013-01-04T19:35:52.807 回答