开发者 https://www.devze.com 2023-02-04 12:50 出处：网络

What am looking for is to have multiple iFrames (or something similar) on a page, any of which when hovered over enlarges in size. By default, they should only show part of the page.For example, most

What am looking for is to have multiple iFrames (or something similar) on a page, any of which when hovered over enlarges in size. By default, they should only show part of the page.For example, most of the iFrames will have some charts or graphs. I was wondering if there was a way for me to only see the chart/graph and additionally when hovered-over the iFrame can expand in width and heigh开发者_如何学JAVAt. Would highly appreciate if anyone can provide any recommendation/pointers/code snippets about the same revolving around jsp/jquery/java script/css or something related. Thanks in advance!

jQuery -

     $(document).ready(function() {
       $("#frame-1").mouseover(function() {
            $(this).attr({width: 800, 
                          height: 500});
            }).mouseleave(function() {
                $(this).attr({width: 300, 
                              height: 400});
                });
            });

w/ HTML -

<html>
<head>
    <title>Frame Enlargementationing</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
         $(document).ready(function() {
           $("#frame-1").mouseover(function() {
                $(this).attr({width: 800, 
                              height: 500});
                }).mouseleave(function() {
                    $(this).attr({width: 300, 
                                  height: 400});
                    });
                });
    </script>
</head>
</html>
<body>

<h1>Hover:</h1>
<iframe id="frame-1" src="http://jquery.com/" width="300" height="400"></iframe>


</body>
</html>

you could try this trick,

CSS

iframe {
    width: 100%;
    height: 100%;
}

div {
    width: 300px;
    height: 200px;
}

div.hover {
    width: 400px;
    height: 300px;
}

html

<div>
    <iframe src="http://google.com"></iframe>
</div>

jquery

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

demo

You could do a CSS psuedo hover class that makes the iframe bigger.

For example:

iframe { 
width: 500px;
height: 700px;
}

iframe:hover {
width: 700px;
height: 900px;
}

I'm not 100% sure if this will work with iframes... but it's worth a try!

Multiple iFrames enlarges on hover

demo

精彩评论

关注公众号

热门标签

图文推荐

Multiple iFrames enlarges on hover

demo

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：