关于使用 jquery mouseover 动态更改 div 的反馈

Question

基本上，我有许多图标，当有人将鼠标悬停在图标上时，我希望这些图标上方的内容发生变化。我目前的计划是使用鼠标悬停来添加/删除一个更改 div 不透明度的类，并让 div 以绝对定位相互重叠。因为我是一名自学成才的开发人员，所以回想起来，我发现我通常会让自己的事情变得比他们需要的更难。 :) 我想我会向我所在的一些社区询问他们对此设置的意见。也许有更好的方法我完全错过了。我需要它兼容回 IE8。

编辑：我使用的是 jQuery 1.8.3。很抱歉漏掉了。

Answer 1

你的问题有点含糊。您使用了标签“jquery”，所以我假设您在您的网站上使用了某些版本的 jquery。

我为你做了一个快速的 jsfiddle：http://jsfiddle.net/pMCxP/2/

我没有使用mouseover 事件，而是使用了hover 事件。

$(this).hover(function(){
        $("#content div").hide();
        var contentBlock = $(this).attr('class');
        $("#" + contentBlock).show();
    });

在代码中，我为每个内容块指定了一个 id，然后对于相应的按钮/图标，我将其 css 类设置为与内容的 id 相同。然后我可以用它在悬停时显示块。

我希望这可以帮助您，或者至少为您指明正确的方向。

Answer 2

这是一种允许您为每个“图标”鼠标悬停预定义 html 和 css 的方法。

直播版：http://jsfiddle.net/gSAjV/2240/

var content1 = '<p>This is some html that will fill the content window</p>';
var content2 = '<p>This is more html that will fill the content window</p>';
var content3 = '<p>This is other html that will fill the content window</p>';
var content4 = '<p>This is even more html that will fill the content window</p>';

$('#icon1').mouseover(function(){
    $('#content').html(content1);
    $('#content').css( "background-color", "red" );
});
$('#icon2').mouseover(function(){
    $('#content').html(content2);
    $('#content').css( "background-color", "orange" );
});
$('#icon3').mouseover(function(){
    $('#content').html(content3);
    $('#content').css( "background-color", "yellow" );
});
$('#icon4').mouseover(function(){
    $('#content').html(content4);
    $('#content').css( "background-color", "green" );
});

这可行，但据我所知，在更改 div 内容时添加干净的过渡要困难得多。如果您想要淡入淡出或任何其他“A”-“B”类型的过渡，那么最好按照您的建议将所有内容预加载到多个分层 div 上。

也可以只使用两个 div 进行转换。一个 div 用于保存您当前的内容，另一个用于在鼠标悬停时加载新内容，一旦加载，就会淡入（过渡）。

Answer 3

我会这样构建

http://jsfiddle.net/UQPe3/1/

HTML

<div class='container'>
    <div class='slide1'>slide1</div>
    <div class='slide2 hidden'>slide2</div>
    <div class='slide3 hidden'>slide3</div>
    <div class='slide4 hidden'>slide4</div>
</div>

<div class='icon-wrapper'>
    <div class='icons'>
        <button type='button' data-slide='slide1'></button>
        <button type='button' data-slide='slide2'></button>
        <button type='button' data-slide='slide3'></button>
        <button type='button' data-slide='slide4'></button>
    </div>
</div>

CSS

.container div {
    background: #999;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    text-align: center;
    width: 600px;
}

.icon-wrapper {
    text-align: center;
}

.icons {
    display:inline-block;
}

.icons button {
    background-color: #999;
    border: none;
    cursor: pointer;
    height: 60px;
    margin-left: 30px;
    margin-right: 30px;
    width: 60px;
}

.icons button:hover {
    background-color: #333;
}

.hidden {
    display: none;
}

JS

$('.icons button').on(
{
    mouseenter: function()
    {
        $('.container div').addClass('hidden');
        var show_slide = $(this).attr('data-slide');
        $('.' + show_slide).removeClass('hidden');
    }
});