Uploadify按钮：是否使用CSS样式？

Uploadify按钮：是否使用CSS样式？

我已经能够提出一个可行的解决方案。基本概要如下：

• 禁用Uploadify按钮图像

  buttonImg: " "

• 使Flash对象透明

  wmode:"transparent"

• 使用CSS将伪造的样式

  button

  或

  a

  标签放置在Flash对象后面
• 初始化Uploadify后，设置对象的宽度和高度以匹配其后面的按钮

Flash对象将屏蔽其下方的按钮，使其免受鼠标悬停等事件的影响；因此，要获得悬停效果，您需要采取一些其他步骤：

• 将按钮和上载对象都包装在div中
• 初始化Uploadify后，设置包装器div的宽度和高度以匹配按钮
• 然后，您可以使用jQuery处理

  .hover()

  包装div上的事件，并将样式应用于按钮

放在一起：

HTML

<div >    <a>Upload Files</a>    <div >       <input type="file" id="Uploadify" name="Uploadify" />    </div></div>

CSS

div.UploadifyButtonWrapper{    position:relative;}div.UploadifyButtonWrapper a {    position:absolute;     top:0;    left:0;    z-index:0;    display:block;    float:left;    border:1px solid gray;    padding:10px;    background:silver;    color:black;}div.UploadifyButtonWrapper a.Hover {    background:orange;    color:white;}div.UploadifyObjectWrapper {    position:relative;    z-index:10;}

Javascript：

$("input.Uploadify", self).uploadify({    ...    buttonImg: " ",    wmode: "transparent",    ...});var $buttonWrapper = $(".UploadifyButtonWrapper", self);var $objectWrapper = $(".UploadifyObjectWrapper", self);var $object = $("object", self);var $fakeButton = $("a", self);var width = $fakeButton.outerWidth();var height = $fakeButton.outerHeight();$object.attr("width", width).attr("height", height);$buttonWrapper.css("width", width + "px").css("height", height + "px")$objectWrapper.hover(function() {    $("a", this).addClass("Hover");}, function() {    $("a", this).removeClass("Hover");});