dsb238100 2012-09-24 11:07
浏览 90

mouseover透明div类来显示图像

I am stuck very long on this.. hoping someone can help me with this as I am not proficient in Javascript.

The scenario is this:

I am using wordpress, and in a single page, I have a big picture(800px X 1200px) with cupcakes in it.

The effect I am hoping to achieve is this; When the user mouseover a particular cupcake(with a layer of transparent div), there will be an image that will appear(320px x 320px).

I tried using css :hover, it works for safari, chrome and firefox. But for IE, it does not work. Thus I am thinking of using javascript to manipulate the div class instead onmouseover and onmouseout events

PHP/HTML:

<div id="f1"></div>

CSS:

#f1{
width: 100px;
height: 50px;
left: 370px;
top: 450px;
position: absolute;
opacity:0;
}

So when the user mouseover the transparent div, I want an image(320px x 320px) to appear.

Many thanks!

  • 写回答

4条回答 默认 最新

  • dongtuan1594 2012-09-24 11:13
    关注

    :hover is supported in IE7+, but there might be other issues that are buggy or not supported such as opacity or hasLayout issues.

    You can do this is javascript:

    var div = document.getElementById('f1');
    div.onmouseover = function() {
        div.className += ' hover';
    };
    div.onmouseout = function() {
        div.className = div.className.replace(/\shover/,'');
    }
    

    Or jQuery:

    $('#f1').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });
    

    It will add a hover class to the element when moused over so you can style it, f.ex:

    #f1.hover{ background:url(path/to/img.jpg); }; 
    
    评论

报告相同问题?

悬赏问题

  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀