代码之家 › 专栏 › 技术社区 › Boucherie

CSS/SCSS rails转换div,但不是嵌套图像(rails)

css-transforms transform hover css

1

Boucherie · 技术社区 · 8 年前

我试图在一个主分区内设置am图像,在该分区上悬停会使附加的图像放大2秒以上。只有div本身(边框)缩放,而不是附加的图像本身。在撰写本文时,仅尝试缩放图像没有任何作用。这是在Rails 5.1.2中完成的。我错过了什么?

视图/社区/索引。html。erb:

<div class="scene">
    <div id="container1" class="image-div">
      <%= image_tag("hbehance.png", :id =>"first-image", :alt => "first symbol") %>
    </div>
</div>

样式表/社区。css。SCS:

.scene {
  position: relative;
  height: 35rem;
  margin: 1rem;
  width: 95%;
  left: 0;
  top: 0;
  background-image: asset_url("cityscape.jpeg");
  background-size: cover;
}

.image-div{
  position: absolute;
  bottom: 10%;
  width: 60px;
  height: 60px;
  border: 5px solid red;
}

img {
  position: absolute;
  width: 100%;
  transition: transform all 2s;
}

.image-div:hover {
  transform: scale(2);
}

1 回复 | 直到 8 年前

1

Boucherie 8 年前

找到了!

图像嵌套在div中,但需要追加以串联响应:

document.addEventListener('DOMContentLoaded', function(){

  firstDiv = document.getElementById('container1');
  firstImage = document.getElementById('first-image');
  firstDiv.append(firstImage);

  function testJS(){
    firstDiv.style.left = "50%";
  }
  testJS();//tests that JS file connects properly when first setup
})