0

Basically, I have a number of icons and I want the content above those icons to change when someone hovers over the icon. My plan at the moment is to use mouseover to add/remove a class that changes the opacity of the div and just have the divs overlap each other with absolute positioning. Because I'm a self-taught developer, I find, looking back, that I usually make things harder on myself than they need to be. :) I figured I would ask some of the communities I'm apart of for their opinion on this setup. Maybe there is a better way I'm totally missing. I need it to be compatible back to IE8.

enter image description here

Edit: I'm using jQuery 1.8.3. Sorry for leaving that out.

4

3 回答 3

1

我会这样建造

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');
    }
});
于 2013-07-02T18:26:26.693 回答
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 相同。然后我可以用它在悬停时显示块。

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

于 2013-07-02T18:01:19.630 回答
1

这是一种允许您为每个“图标”鼠标悬停预定义 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 用于保存当前内容，另一个用于在鼠标悬停时加载新内容，一旦加载，就会淡入（过渡）。

于 2013-07-02T18:12:17.757 回答