Question

我有一个包含大约5张图像的页面，所有图像都散布在页面上，具有各种绝对位置和不同大小。我的目标是使用css和悬停事件将图像转换到屏幕中心。

到目前为止，这是我的css：

.bbimage{
z-index: 1;
-webkit-transition: -webkit-transform 0.8s ease;
-moz-transition: -moz-transform 0.8s ease;
transition: transform 0.8s ease;


.bbimage:hover{
position:absolute !important;
/*left:50% !important;
top:250px !important;   <-very jittery and choppy */
-ms-transform: scale(3) rotate(0deg)!important;
-webkit-transform: scale(3) rotate(0deg)!important;
transform: scale(3) rotate(0deg)!important;
z-index: 3;
cursor: pointer;
}
.bbplaceholder:hover + .bbimage{
position:absolute !important;
left:50% !important;
top:250px !important;
-ms-transform: scale(3) rotate(0deg) !important;
-webkit-transform: scale(3) rotate(0deg) !important;
transform: scale(3) rotate(0deg) !important;
z-index: 3;
cursor: pointer;
}

最初我使用的是简单的过渡，但我发现它们起伏不定，特别是在铬合金中。我最终切换到变换，这对缩放和旋转非常有用，但我还有两个问题。

第一个问题是，transform：translate指定相对转换，而不指定绝对位置。第二个问题是潜在的可变屏幕尺寸。

我当前的攻击计划使用Jquery附加css样式，以便指定计算的相对平移到窗口中心。

以下是我所拥有的：

    <script>
$( document ).ready(function() {
$('.bbimage:hover').css('-webkit-transform','translate(500px, 500px)');

});
    </script>

这似乎没有做任何事情，我不确定我做错了什么。我对css很陌生，对Jquery来说是新手。显然，这只是一个初步的测试，看看我是否可以附加CSS，我还没有计算窗口中心。

Answer 1

jquery .css方法将在元素的样式属性中添加样式，但这不能处理:hover个事件。

这些应该在css样式表中动态添加才能工作。

请参阅here how to add dynamic stylesheet in javascript

附加css样式以添加动态变换转换

1 个答案: