css - 在 HTA 中具有悬停缩放动作的 CSS 表

Question

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

我建立了一个表格，我正在尝试使用悬停动作来放大一个单元格而不移动其余单元格。我也希望它以缩放为中心，它似乎从左上角作为它的轴缩放。下面是我的表格的编辑部分。目前，当我悬停时，它会缩放并将所有内容向右移动。我希望它可以缩放并将其他所有内容都保留在它的位置。如果您需要更多信息，请告诉我。顺便说一句，这都是针对 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>

score 3 · Accepted Answer

在现代浏览器中，这可以使用 CSS3 来完成transform:scale(1.5)。然而，在旧浏览器或 HTA 使用的 mshta.exe 中，它更复杂

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

但是，如果这不起作用，您可以使用以下代码添加对 pre-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 选择器不会覆盖元素已有的样式，除非指定这样做，因此您不必在类和悬停中重复相同的代码，您只需包含更改的部分

此外，您可以为每个元素使用更通用的类和第二个类，而不是使用两个类button1and ，即andbutton2buttonredblue

实施所有这些更改，您会得到如下所示的结果

.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 的后备

如果可以，此更新的解决方案将使用 CSS3scale，但如果不能，则使用自定义 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 中创建一个自定义的伪缩放函数是一个有趣的想法。希望评论可以帮助您充分理解它

希望经过所有这些工作，您的问题终于得到解决！

score 0 · Accepted Answer

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

链接到小提琴

.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;
}

score 0 · Accepted Answer

我能够通过上面每个人的贡献以及 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>

css - 在 HTA 中具有悬停缩放动作的 CSS 表

3 回答 3

Related

Reference