Question

我有一张图片：

 Clown%20Fish

onmouseover我必须显示另一张图片：

 image.jpeg

在图像上方：

 energy.jpeg

（使用webkit-transition显示：不透明度1s轻松输出属性）

我在这里得到了第一个代码表单：http://css3.bradshawenterprises.com/cfimg/#comments

剂量不起作用......

这是现场演示：http://liveweave.com/6EgbYH

这是代码：

 <!DOCTYPE html>
 <html>
 <head>
 <style>

 #cfnormal {
   position:relative;
   height:281px;
   width:450px;
   margin:0 auto;
 }

 #cf {
   position:relative;
   height:10px;
   width:450px;
   margin:0 auto;
 }


 #cf img {
   position:absolute;
   left:0;
   width:450px;
   -webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -o-transition: opacity 1s ease-in-out;
   transition: opacity 1s ease-in-out;
 }


 </style>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
 </script>

 <script>
 function change(x)
 {
var element = document.getElementById('imgtop');
element.style.opacity = "0";
 }
 </script>
 </head>

 <body>

 <div id="cf">
   <img id="imgbott" class="bottom" src="./image.jpeg" />
   <img id="imgtop" class="top" src="./energy.jpeg" />
 </div>

 <div id="cfnormal">
   <img onmouseover="change(this)" src="./Clown%20Fish.jpg" />
 </div>

 </body>
 </html>

Answer 1

当第三张图像在鼠标悬停时触发事件时，我必须显示一张图像超过另一张图像

这是正确的代码：

  <!DOCTYPE html>
  <html>
  <head>
  <style>

  #cfnormal {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
  }

  #cfnormal img {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
  }

  #cf {
    position:relative;
    height:10px;
    width:450px;
    margin:0 auto;
  }


  #cf img {
    position:absolute;
    left:0;
    width:450px;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  }


  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>

  <script>
  function change(x)
  {
var element = document.getElementById('imgtop');
element.style.opacity = "0";
  }
  function normalImg(x)
  {
var element = document.getElementById('imgtop');
element.style.opacity = "1";
  }
  </script>
  </head>

  <body>

  <div id="cf">
    <img id="imgbott" class="bottom" src="http://youngsskatingcenter.com/nss-            folder/pictures/Many_colors.gif" />
  <img id="imgtop" class="top"       src="http://freepages.genealogy.rootsweb.ancestry.com/~genphotos2/jwline.jpg" />
  </div>

  <div id="cfnormal">
    <img onmouseover="change(this)"  onmouseout="normalImg(this)"       src="http://www.vmapas.com/maps/2748-2/Immagine_Satellitare_Mondo_Occidentale.jpg" />
  </div>

  </body>
  </html>

交叉褪色图像javascript

1 个答案: