LOgo
Trang Chủ Giới Thiệu Blog Tìm kiếm
23:352024-05-23
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 filelist ảnh chuẩn slideshow cực đẹp

Code filelist xtgem kết hợp slideshow javascript cự đẹp cho wap ảnh ...

Share code javascript slide cho web/wap hay đẹp

Code javascript + css + html cực hay, code slideshow đẹp cho web/wap ...

Share code background tuyết rơi bằng css và javascript cực đẹp cho wap

Share code background tuyết rơi bằng css và javascript cực đẹp cho wap, code js cực hay đẹp ...

Công cụ tạo logo đẹp online, các trang tạo logo trực tuyến miễn phí

Công cụ tạo logo đẹp online, các trang tạo logo trực tuyến miễn phí ...

Share code javascript và css hiệu ứng cho chuột

Bộ code hịu ứng cực đẹp cho chuột, hiệu ứng hay bằng javascript và css ...

Share code tạo ảnh xoay liên tục, ảnh xoay khi hover chuột, css cực đẹp

Share code tạo ảnh xoay liên tục, ảnh xoay khi hover chuột, css cực đẹp, css3 hiệu quả 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


Duck hunt