0

当“图像条”悬停时，它会打开到其内容的高度。但是，这样做时也应该有一个平滑的过渡。我究竟做错了什么？CSS3 似乎没有影响它。

Javascript：

<script type="text/javascript">
function hover(id) {
document.getElementById(id).style.height="100%";
}
</script>

风格：

#image-strip{
    width: 100%;
    height: 300px;
    float: left;
    overflow: hidden;
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    cursor: pointer;
}

#image-strip img{
    width: 100%;
}

的HTML：

<div id="image-strip" onmouseover="hover('image-strip')"><img src="images/content/1.jpg"></div>
4

2 回答 2

0 
<div id="image-strip" onmouseover="hover(this.id)"><img src="images/content/1.jpg"></div>

STEP 2-->你的css（修改你的id到class -->#变成.）

.image-strip{
    width: 100%;
    height: 300px;
    float: left;
    overflow: hidden;
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    cursor: pointer;
}

STEP 3-->JavaScript（只需添加你的 css 类）

function hover(id) {
document.getElementById(id).classList.add('image-strip');
}

只需确保您进行了上述更改，您的代码就可以工作。100% 我遇到了同样的问题，LINK--> css 反弹并在 javascript 中添加类

更新 1-->

用 javascript 应用你的 css，

document.getElementById(id).style.webkitTransitionDuration="0.6s";
document.getElementById(id).style.webkitTransitionTimingFunction="linear";
document.getElementById(id).style.cursor="pointer";
于 2013-07-14T05:42:32.440 回答
0

有几件事，第一件事：您实际上可以将“this”传递给您的函数调用，因为这样您就可以访问它并且不需要再次访问 DOM，从而节省时间和内存，虽然数量不多，但它是一种更好的做法. onmouseover="hover(this)"

function hover(el) {
    el.style.height="100%";
}

第二件事：
CSS 过渡意味着在没有 Javascript 的情况下使用，关键是不需要 JS 来操作 DOM，以便让过渡工作你可以这样做：

#image-strip{
   width: 100%;
   height: 300px;
   float: left;
   overflow: hidden;
   transition: height 0.3s ease-in;
   -webkit-transition: height 0.3s ease-in;
   -moz-transition: height 0.3s ease-in;
   -ms-transition: height 0.3s ease-in;
   cursor: pointer;
}

#image-strip:hover {
   height: 100%;
}

您只需要在要影响的属性上调用转换，然后当元素发生状态更改（例如悬停）时，转换就会启动。要明确的是，您不需要任何 Javascript 来使用转换，除非您可能添加或删除一个元素来启动转换，但你不需要任何 JS 来完成你正在做的事情。希望这会有所帮助。

于 2013-07-14T04:11:51.137 回答