Question

当我在图像的不同部分上空盘旋时，我对具有不同内容的div有过渡效果（使用 CSS 和 Javascript 向上滑动）（使用地图< /强>）。由于地图对图像的每个部分都有悬停效果，因此只有在我输入图像时才会出现上滑效果（ NOT ）。对于个别悬停（ AFTER 进入图像），它只会更改div 的内容而不进行任何转换（尽管我已经为mouseout定义了一个函数）。如何获得每个部分的转换？

情况示例：

HTML：

<div id="rating_value"></div>
<a onMouseOver="on(0)" onMouseOut="off()">Link1</a><a onMouseOver="on(1)" onMouseOut="off()">Link2</a><a onMouseOver="on(2)" onMouseOut="off()">Link3</a>

CSS：

#rating_value
{
height:30px;
position:relative;
top:60px;
opacity:0;
z-index:-1;
pointer-events:none;
}

Javascript：

var rating_values=["link 1","link 2","link 3"];
function on(element)
{
    var rating=document.getElementById("rating_value");
    rating.innerHTML=rating_values[element];
    $("#rating_value").css({'opacity':'1','top':'0px','transition':'opacity 0.5s,top 0.5s ease-out'});
}
function off()
{
    $("#rating_value").css({'opacity':'0','top':'60px','transition':'opacity 0s,top 0s'});
}

以下是正在发生的事情的示例： the problem

我真正想要的是： the wanted

图像尺寸为240x48。

图像地图：

        <div id="empty_star_and_its_map">
            <img src="star/all_empty.png" usemap="#empty_star_map">
            <map name="empty_star_map" onMouseOut="hide_star()">
                <area shape="rect" coords="0,0,24,48" onMouseOver="show_star(0.5)" onMouseOut="hide_star()">
                <area shape="rect" coords="24,0,48,48" onMouseOver="show_star(1)" onMouseOut="hide_star()">
                <area shape="rect" coords="48,0,72,48" onMouseOver="show_star(1.5)" onMouseOut="hide_star()">
                <area shape="rect" coords="72,0,96,48" onMouseOver="show_star(2)" onMouseOut="hide_star()">
                <area shape="rect" coords="96,0,120,48" onMouseOver="show_star(2.5)" onMouseOut="hide_star()">
                <area shape="rect" coords="120,0,144,48" onMouseOver="show_star(3)" onMouseOut="hide_star()">
                <area shape="rect" coords="144,0,168,48" onMouseOver="show_star(3.5)" onMouseOut="hide_star()">
                <area shape="rect" coords="168,0,192,48" onMouseOver="show_star(4)" onMouseOut="hide_star()">
                <area shape="rect" coords="192,0,216,48" onMouseOver="show_star(4.5)" onMouseOut="hide_star()">
                <area shape="rect" coords="216,0,240,48" onMouseOver="show_star(5)" onMouseOut="hide_star()">
            </map><!--end of map for empty stars-->
        </div><!--end of #empty_star_and_its_map-->

Answer 1

将内联onMouseOut更改为onMouseLeave

如何在javascript中同时触发/触发多个函数时设置函数执行的顺序？

1 个答案: