XtGem Forum catalog
LOgo
Trang Chủ Giới Thiệu Blog Tìm kiếm
00:432024-05-24
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 html, css cơ bản cho làm wap

Làm wap ai cũng phải biết html và css, với những code html, css cơ bản chắc chắn sẽ giúp bạn rất nhiều....

Hướng dẫn làm một trang điều hướng báo lỗi 404

Đối với mỗi trang wap một trong những thứ cơ bản và không thể thiếu là trang 404. Vậy làm sao để tạo được một trang 404 ?...

Bảng mã màu HEX đầy đủ cho html, css

Bảng mã màu đầy đủ cho làm web/wap rất hữu dụng là thứ không thể thiếu với các wapmaster ...

«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