0

当我将鼠标悬停在一个图标上时，我试图让一个 div 显示在我的页面上。不过，完整的代码“系统”有点复杂......

场景
在页面加载时，用户会看到一个小条显示他/她所在地区的当前天气状况。当用户将鼠标悬停在此栏上时，其下方将出现一个更大的 div，其中包含更详细的预报和代表该国其他地区当前天气状况的图标。

当用户将鼠标悬停在这些图标上时，应该会为悬停的图标所代表的区域显示更详细的天气预报（或可能作为工具提示）。

结构
因为雅虎的天气api转发的HTML很丑，所以我写了我的jquery来重写它并输出如下：

<div id="weather">
    <div id="weather-feed">
        <div class="weather-conditions">Mostly Cloudy, 23 C</div>
        <div class="weather-icon">
            <img src="http://l.yimg.com/a/i/us/we/52/28.gif"><span>Pretoria</span>

        </div>
    </div>
    <div class="weather-more-button">+</div>
    <div class="weather-extra">
        <div class="weather-forecast">
            <p style="font-size: 13pt;"><b>Forcast for your area:</b>

            </p>Thu - Mostly Clear. High: 25 Low: 14
            <br>Fri - Mostly Sunny. High: 25 Low: 17
            <br>Sat - Mostly Sunny. High: 28 Low: 18
            <br>Sun - Sunny. High: 31 Low: 17
            <br>Mon - Sunny. High: 31 Low: 17
            <br>
            <br><a href="http://us.rd.yahoo.com/dailynews/rss/weather/Pretoria__SF/*http://weather.yahoo.com/forecast/SFXX0044_c.html">Full Forecast at Yahoo! Weather</a>

        </div>
        <table width="100%">
            <tbody>
                <tr>
                    <td align="center" width="33%">
                        <img class="jhb" src="http://l.yimg.com/a/i/us/we/52/3200.gif">
                    </td>
                    <td align="center" width="33%">
                        <img class="dbn" src="http://l.yimg.com/a/i/us/we/52/30.gif">
                    </td>
                    <td width="33%" align="center">
                        <img class="cpt" src="http://l.yimg.com/a/i/us/we/52/34.gif">
                    </td>
                </tr>
                <tr>
                    <td align="center">JHB</td>
                    <td align="center">DBN</td>
                    <td align="center">CPT</td>
                </tr>
            </tbody>
        </table>
        <div class="jhbw">
            <hr>
            <p style="font-size: 13pt;"><b>Forcast for Johannesburg:</b>

            </p>
            <br>Thu - Mostly Clear. High: 22 Low: 11
            <br>Fri - Mostly Sunny. High: 22 Low: 14
            <br>Sat - Mostly Sunny. High: 26 Low: 15
            <br>Sun - Sunny. High: 27 Low: 14
            <br>Mon - Sunny. High: 28 Low: 13
            <br>
            <br>
        </div>
    </div>
</div>

请注意，此处显示的所有天气数据都是动态生成的。

JQuery
我使用了 mouseenter 和 mouseleave 事件的绑定，这些事件绑定到 jquery 代码中的单独函数以促进悬停事件：

var showWeather = function (target) {
    var div = $(target);
    console.clear();
    div.css("display", "block");
}
var hideWeather = function (target) {
    var div = $(target);
    div.css("display", "none");
}
$("img.jhb").bind({
    mouseenter: function () { showWeather("jhbw") },
    mouseleave: function () { hideWeather("jhbw") }
});
var showExtra = function () {
    var extra = $(".weather-extra");
    extra.css("display", "block");
}

var hideExtra = function () {
    var extra = $(".weather-extra");
    extra.css("display", "none");
}

$("#weather").bind({
    mouseenter: showExtra,
    mouseleave: hideExtra
});

问题
目前，只有最后一个函数 ( showExtra, hideExtra) 和绑定#weather似乎有效。我在函数中添加了 console.clear() ，showWeather以便我可以通过控制台立即看到该函数是否正在执行。它不是。

我在http://jsfiddle.net/a3fRM/2/上发布了一个 JSFiddle

我看不出我在这里做错了什么。在我看来，两个绑定应该以完全相同的方式工作。

如果有人能看到出了什么问题，我将不胜感激。

我意识到这可能是非常具体的，所以如果你必须关闭这个问题，但至少等待有人可以回答

4

1 回答 1

0

您正在传递“jhbw”之类的目标，然后使用 $(target).-> $("jhbw") 与任何内容都不匹配。

使用类似的东西：

var showWeather = function (target) {
    var div = $("div ."+target);
    console.clear();
    div.css("display", "block");
}
于 2013-03-14T14:29:56.717 回答