Teya Salat
LOgo
Trang Chủ Giới Thiệu Blog Tìm kiếm
14:092024-05-27
Quảng cáo:
Nội dung:

Share code css, thay đổi background images thẻ div khi hover chuột qua thẻ li. Code css, html, javascript

Html:
<div class="row">
<div class="steps">
<h2>Installation</h2>
<ol>
<li data-figure-img="http://thantienvxp.xtgem.com/images/lam-web/thistle.jpg">
Các bề mặt trục được chuẩn bị bằng cách làm sạch sơn dầu và ăn mòn, với cải tạo chân không HEPA.
</li>
<li data-figure-img="http://thantienvxp.xtgem.com/images/lam-web/html.png">
Máy phát điện không dây kết nối với một nguồn điện cố định được cài đặt trên các trục.
</li>
<li data-figure-img="http://thantienvxp.xtgem.com/images/lam-web/html_css.jpg">
Một máy tính hiển thị được đặt gần đó. Kỹ sư có thể truy cập dữ liệu và kiểm soát chức năng từ xa từ vị trí này
.</li>
</ol>
</div>
<figure id="steps-figure">
</figure>
</div>

Css:
div.steps:hover + figure {
background-image: url("http://placehold.it/350x150");
}

figure {
float: right;
width: 350px;
height: 150px;
}

figure {
width: 200px;
height: 200px;
background-position: center;
background-size: cover;
border: 1px solid red;
}

JavaScript:
var figureImgs = document.querySelectorAll('.steps li');
var figureImg = document.getElementById('steps-figure');
for (var i = 0; i < figureImgs.length; ++i) {
figureImgs[i].addEventListener('mouseenter', function() {
var img = this.getAttribute('data-figure-img');
figureImg.style.backgroundImage = "url(" + img + ")";
}, false);
}

Chúc các bạn thành công.
Xem demo ở đây:Click here
Share code javascript hiệu ứng ảnh chuyển động cực đẹp khi kéo thanh cuộn trang

Hiệu ứng ảnh ta ra và mờ dần đi như thể đang ngày càng gần màn hình hơn khi kéo thanh cuộn trang đi xuống và ngược lại khi kéo thanh ...

Bộ Background đẹp cho web wap, chia sẻ background đẹp

Background cực đẹp, background images/ color/ box-showdow/ border-radius cho html/body cực đẹp ...

[Share] code javascript lịch âm dương cực đẹp cho web/wap

Code javascript lịch âm dương hữu dụng cho làm web code javascript cực đẹp ...

Hướng dẫn cách chèn App máy đo tình yêu cho wap xtgem

Ứng dụng cho xtgem. Ứng dụng Máy đo tình yêu vô cùng thú vị. Hướng dẫn cách chèn ứng dụng và cùng chơi ...

[Share] code hộp box-shadow cực đẹp cho làm web/wap

Bộ code box-shadow cực đẹp sẽ đem lại nhiều màu sắc cho trang web của bạn ...

[Share] code html css navigation đẹp cho wap/web code cơ bản cho wapmaster

Những mẫu navigation cơ bản nhưng hữu dụng cho làm web. code hay cho làm web/wap ...

1234»
Chia sẻ: SMS Zing Twitter Facebook

Exchanger
U-ON
c-stat
Sitemap.html Sitemap.txt Sitemap.xml
Hosting Miễn Phí

Some Web: Thanhgiang642.wordpress.com tailieu642.xtgem.com