Question

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

enter image description here

编辑：我正在使用jQuery 1.8.3。很抱歉让它离开。

Answer 1

你的问题有点模糊。你使用了标签'jquery'，所以我假设你在你的网站上使用了某种版本的jquery。

我为你做了一个快速的问题：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和一个在鼠标悬停时加载新内容的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');
    }
});

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

3 个答案: