Old school Easter eggs.
LOgo
Trang Chủ Giới Thiệu Blog Tìm kiếm
22:362024-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
Font-family trong html và css, định dạng chữ với font

Font-family trong html và trong css có cấu trúc như thế nào, cách sử dụng và lợi ích của việc dùng font là gì ...

Share code đổ bóng cho chữ, thành phần, text-shadow, box-shadow

Share code đổ bóng cho chữ, thành phần, text-shadow, box-shadow, code css3 cực hay cho web/wap ...

Share code html, css phóng to ảnh khi hover chuột cực hay, đẹp

Chỉ cần sử dụng css và html là ta đã có thể tạo ra hiệu ứng phóng to ảnh cực độc cho web/wap....

Share code css làm ảnh rung động khi hover qua

Code ảnh rung động khi hover sử dụng css3 để làm ảnh động khi hover qua...

Share code html, css cơ bản cho làm wap phần 2

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 tạo filelist game đơn giản

Hướng dẫn tạo Filelist game xtgem đơn giản hiệu quả trong 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