2

我在一个包含简单 HTML 和图像的页面中有几个 div。每个 div 都有唯一的 id。

我希望这样当页面加载 div 的内容时说 60% 但在鼠标悬停时淡入为 100%。在 mouseout 时，他们会回到 60%。

该站点是在Joomla 1.5.x中构建的，因此已经加载了mootools 1.11库。我在网上寻找示例代码，并找到了很多关于使用 jQuery 淡化图像不透明度的参考资料，但对于 mootools 来说并没有那么多。

任何指针将不胜感激:)

4

3 回答 3

0

您也许可以将图像包装成一个 div 并使用这样的东西来淡化？

Fx.Style("div1", "opacity").start(1.0);
于 2009-02-09T12:15:26.000 回答
0

找到了解决方案，很好。它适用于 mootools 1.2.1。我已经调整了代码以淡化 div 而不是 img。

我把这个放在我的脑海里：

<script type="text/javascript"  src="mootools-1.2.1-core-yc.js"></script>  
<script type="text/javascript">

    var fade_in = 1;
    var fade_out = 0.5;

</script>
</head>
<body onload="$$('div.box_panel').fade(0.5);">

然后在我的 div 上。

<div id="box1" class="box_panel" onmouseover="this.fade(fade_in);" onmouseout="this.fade(fade_out);">
        <h2>Box One</h2>
        <p>This is a content box and some sample content to pad it out.</p>
</div>

现在的问题是我不确定如何在 1.11 中获得同样的效果

于 2009-02-09T15:54:46.970 回答
0

为此请使用 CSS3 过渡。这要简单得多。见（http://www.w3schools.com/css/css3_transitions.asp）

div.box_panel {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -webkit-transition: opacity .5s linear;
    -moz-transition: opacity .5s linear;
    -ms-transition: opacity .5s linear;
    -o-transition: opacity .5s linear;
    transition: opacity .5s linear;
}

div.box_panel:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}
于 2017-01-13T11:34:19.903 回答