HTA

HTA

关注
发信
关注(28)粉丝(399)

css - HTA中具有悬停缩放 Action 的CSS表

您好，感谢您阅读我的文章。我对这一切都比较陌生，所以如果它有点草率，我感到抱歉。

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

最佳答案

在现代浏览器中，可以使用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创建自定义伪尺度函数是一个有趣的想法。希望这些评论对您有所帮助

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

关于css - HTA中具有悬停缩放 Action 的CSS表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19769302/

10-12 05:49
Powered by LMLPHP ©2024 HTA 0.026291