在HTA中具有悬停缩放操作的CSS表

时间：2013-11-04 13:58:48

标签： css hover zoom html-table hta

您好，感谢您阅读我的帖子。我对这一切都很陌生，所以如果它有点草率我很抱歉。

我有一个表格，我正在尝试使用悬停操作放大单元格而不移动其余单元格。我也希望它以缩放为中心，它似乎从左上角缩放为轴。下面是我桌子的编辑部分。目前，当我悬停时，它会缩放并向右移动所有内容。我希望它可以缩放并将其他所有内容保留在其位置。如果您需要更多信息，请与我们联系。顺便说一句，这是HTA的全部内容，似乎有些东西在HTA中不起作用。谢谢！

CSS 

.button1 {
    color: red;
    width:245px;
    height:25px;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
}
.button1:hover {
    color: red;
    width:245px;
    height:25px;
    font-family: Tahoma;
    font-size: 14px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
    zoom:150%;
}
.button2 {
    width:245px;
    height:25px;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
}
.button2:hover {
    display: table-cell;
    width:245px;
    height:25px !important;
    font-family: Tahoma;
    font-size: 14px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
    zoom:150%;
}

HTML 

<table class="table">       
    <tr width="25%" >
        <td width="25%" valign="top">
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button1" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button1" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button1" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button2" href="#"onclick="Application"><span>Application</span></a>           
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button2" href="#"onclick="Application"><span>Application</span></a>
            <a class="button2" href="#"onclick="Application"><span>Application</span></a>
            <a class="button2" href="#"onclick="Application"><span>Application</span></a>
        </td>
    </tr>
</table>

3 个答案:

答案 0 :(得分：3)

在现代浏览器中，可以使用CSS3 transform:scale(1.5)完成此操作。但是在较旧的浏览器或HTA使用的mshta.exe中它更复杂

您可以简单地使用<meta http-equiv="x-ua-compatible" content="ie=9">（也许还有<!DOCTYPE html>）使其像IE9一样运作，从而解释CSS3并正常运行。

但是，如果这不起作用，您可以使用以下代码添加对IE9之前的支持

/* IE8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";

/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=1.5,
        M12=0,
        M21=0,
        M22=1.5,
        SizingMethod='auto expand');

/* "\9" is a fix to target only IE versions before IE9 */
margin-left: -64px\9; 
margin-top: -9px\9;

另外，您可以清理一下代码。

由于CSS选择器不会覆盖元素已经具有的样式，除非指定这样做，您不必在类和悬停中重复相同的代码，您只需要包含更改的部分

此外，您可以为每个元素使用更通用的button1类和第二个类，而不是使用button2和button这两个类，即red和blue

实施所有这些更改后，您会看到something like this

的结果 
.button {
    width:245px;
    height:25px;
    display:inline-block;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
}
.button:hover {
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    -o-transform:scale(1.5);
    transform:scale(1.5);

    /* IE8+ */
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";

   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=1.5,
            M12=0,
            M21=0,
            M22=1.5,
            SizingMethod='auto expand');

   margin-left: -64px\9; 
   margin-top: -9px\9;
}
.blue {
    color:blue;
}
.red {
    color:red;
}

就像我从一开始就害怕...如果上述选项不能像你说的那样工作，你可能不得不使用javascript函数作为HTA的后备

This updated solution如果可以，则使用CSS3的scale，但如果不使用自定义的javascript后备，则会使其看起来像是一样的

// Function to see if the browser can support a CSS attribute
var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;

   return function(prop) {
      if ( prop in div.style ) return true;

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });

      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            return true;
         }
      }
      return false;
   };
})();

// Doesn't do anything if the browser supports transform
if (!supports('transform')) {
    // Gets all the buttons
    var buttons = document.getElementsByClassName('button');

    for(var i = 0, j = buttons.length; i < j; i++) {
        // "Scales" them when hovered
        buttons[i].onmouseover = function() {
            scale(this, 1.5);
        }        
    }
}

function scale(obj, scaleFactor) {
    // Makes a copy of the object, positions it absolutely (to not affect
    // other elements), and scales it appropriately
    var clone = obj.cloneNode(true);
    clone.style.position = 'absolute';
    clone.style.top = obj.offsetTop + "px";
    clone.style.left = obj.offsetLeft + "px";
    clone.style.fontSize = parseInt(document.defaultView.getComputedStyle(obj, null).fontSize) * scaleFactor + "px";
    clone.style.width = obj.clientWidth * scaleFactor + "px";
    clone.style.height = obj.clientHeight * scaleFactor + "px";

    // Removes is when it stops being hovered
    clone.onmouseleave = function() {
        unscale(this);            
    }

    document.body.appendChild(clone);
}
function unscale(obj) {
    obj.parentNode.removeChild(obj);
}

从积极的方面来说，在纯JavaScript中创建自定义伪比例函数是一个有趣的想法。希望这些评论足以帮助你理解它

希望在完成所有这些工作后，你的问题终于解决了！

答案 1 :(得分：0)

你愿意使用CSS3吗？这是使用CSS3以及下面的代码的小提琴。我删除了一些不需要的css（.button1：hover保持与.button1相同的设置，因此不需要重写）

Link to fiddle 

.button1 {
    display: inline-block;
    position: relative;
    color: red;
    width:245px;
    height:25px;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
    z-index: 1;
}
.button1:hover {
    -webkit-transform:scale(1.6);
    -moz-transform:scale(1.6);
    -ms-transform:scale(1.6);
    -o-transform:scale(1.6);
    transform:scale(1.6);
    z-index: 2;
}
.button2 {
    display: inline-block;
    position: relative;
    width:245px;
    height:25px;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
    z-index: 1;
}
.button2:hover {
    -webkit-transform:scale(1.6);
    -moz-transform:scale(1.6);
    -ms-transform:scale(1.6);
    -o-transform:scale(1.6);
    transform:scale(1.6);
    z-index: 2;
}

答案 2 :(得分：0)

我能够通过上面所有人的贡献以及Teemu发布的链接来实现这一点。不幸的是，在每个人都努力工作之后，我相信修复只是简单地拥有！DOCTPYE和元标记（在正确的位置）。非常感谢大家的帮助！请参阅下面的工作代码

<!DOCTYPE html>
<HTML>
  <HEAD>
    <TITLE>Menu</TITLE>
    <meta http-equiv="x-ua-compatible" content="ie=9">  
    <HTA:APPLICATION ID = "AppMenu"
        APPLICATIONNAME = "AppMenu"
        border="thick"
        scroll="no" 
        singleinstance="no"
        showintaskbar="yes"
        windowstate="Normal"
        innerBorder="no"
    >
<Script>
</Script>

</HEAD>
 <style text="text/CSS">
.button {
    width:245px;
    height:15x;
    display:inline-block;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
}
.button:hover {
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    -o-transform:scale(1.5);
    transform:scale(1.5);


}
.Normal {
    color:Normal;
}
.Eform {
    color:Red;
}
</style> 
  <BODY>
    <table class="table" style="padding-left:50px" >       
        <tr width="25%" style="padding-left:50px" >
            <td width="25%" valign="top" style="padding-left:50px" >
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a>           
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Normal" href="#"onclick="Application"><span>Application</span></a>
            </td>
        </tr>
    </table>

  </BODY>
</HTML>
相关问题
最新问题