首頁猿問當班級處于活動狀態(tài)和非活動狀態(tài)時更...

當班級處于活動狀態(tài)和非活動狀態(tài)時更改鼠標懸停的背景圖像

JavaScript

阿波羅的戰(zhàn)車 2021-12-23 15:38:11

我想在鼠標懸停和鼠標移開時更改 div 元素的背景圖像。此外，當 div 元素處于活動狀態(tài)時，它應該只使用一張圖片。這可以通過 Jquery 或 Javascript 來實現嗎？上面是 HTML 代碼，其中所有三個項目都具有相同的類名，但我添加了自定義圖像而不是圖標var div1 = document.getElementById("custom_image");var div2 = document.getElementById("inner_id");setInterval(function() { if ($('#custom_image').hasClass("active")) { div2.onmouseover = function() { $(div2).find("[id=no_hover_]").attr("src", "img/no-dollar_white.png"); }; div2.onmouseout = function() { $(div2).find("[id=no_hover]").attr("src", "img/no-dollar_white.png"); }; } else { div2.onmouseover = function() { $(div2).find("[id=no_hover_]").attr("src", "img/no-dollar_white.png"); }; div2.onmouseout = function() { $(div2).find("[id=no_hover]").attr("src", "img/no-dollar_blue.png"); }; }}, 1);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="col-md-6"> <div class="how-app-work-content-wrap"> <div class="title"> <h3>How are we different?</h3> </div>  <div class="how-app-work-content" id="how-app-work-slider-pager"> <a href="#" class="pager-item active" data-slide-index="0"> <div class="single-how-app-work "> <div class="icon-box"> <div class="inner"> <i class="far fa-thumbs-up"></i> </div>  </div>  <div class="text-box"> <h4>Be Independent</h4> <p>We use a customized application tobe <br /> specifically designed a testing gnose <br /> to keep away for people.</p> </div>  </div> </a>  <a href="#" class="pager-item" data-slide-index="1"> <div class="single-how-app-work"> <div class="icon-box"> <div class="inner"> <i class="far fa-handshake-o"></i> </div>

查看完整描述

3 回答

慕容森

TA貢獻1853條經驗獲得超18個贊

請使用 css3 來實現您想要的結果，這是簡單而有效的方法。

.myclass {

margin-top: 100px;

width: 100%;

}

.myclass:hover {

background: url("https://img.etimg.com/thumb/msid-68333505,width-643,imgsize-204154,resizemode-4/googlechrome.jpg");

}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor

in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat

non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit

anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur

adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit

esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

反對回復 2021-12-23

呼如林

TA貢獻1798條經驗獲得超3個贊

無需使用 jquery 或 javascript。您應該使用 CSS 完成此操作。

你需要做的是：

將您的更改img為div帶有背景圖像的

選擇您#custom_image這是不 .active使用#custom_image:not(.active)

添加一個懸停其子#no_hover使用#no_hover:hover

這意味著以下 CSS 選擇器：#custom_image:not(.active) #no_hover:hover.

要改變形象，如果#custom_image是.active，你必須選擇孩子#no_hover的#custom_image這是.active。

您將使用 #custom_image.active #no_hover

// for example only:

document.getElementById('toggle-active').onclick = function() {

document.getElementById('custom_image').classList.toggle('active');

document.getElementById('active-info').innerHTML = document.getElementById('custom_image').classList.contains('active') ? 'active' : 'not active';

}

#no_hover {

width: 52px;

height: 58px;

padding-top: 12px;

background-size: cover;

}

#custom_image:not(.active) #no_hover:hover {

}

#custom_image.active #no_hover {

}

<button id="toggle-active">Toggle Active</button> #custom_image is <span id="active-info" style="font-weight: bold; color: red;">not active</span>

<hr />

</div>

</div>

<h4>No Commission</h4>

<p>We use a customized application tobe <br /> specifically designed a testing gnose <br /> to keep away for people.</p>

</div>

</div>

</a>

以下代碼段是一個使用字體真棒圖標并使用類.pager-item而不是 id的示例 #custom_image。

// for example only:

document.getElementById('toggle-active').onclick = function() {

document.getElementById('custom_image').classList.toggle('active');

document.getElementById('active-info').innerHTML = document.getElementById('custom_image').classList.contains('active') ? 'active' : 'not active';

}

.pager-item .inner i {

font-size: 50px;

padding-top: 12px;

background-size: cover;

color: #0000FF;

}

.pager-item:not(.active) .inner i:hover {

color: #CCCCCC;

}

.pager-item.active .inner i {

color: #0000FF;

}

<button id="toggle-active">Toggle Active</button> .pager-item is <span id="active-info" style="font-weight: bold; color: red;">not active</span>

<hr />

</div>

</div>

<h4>No Commission</h4>

<p>We use a customized application tobe <br /> specifically designed a testing gnose <br /> to keep away for people.</p>

</div>

</div>

</a>

反對回復 2021-12-23

暮色呼如

TA貢獻1853條經驗獲得超9個贊

你不需要使用任何 jQuery 來實現你想要的，這一切都可以通過 CSS 使用:hover偽類和類名來完成。

這是一個例子......正常情況下它會是粉紅色的，將鼠標懸停在它上面是淺藍色......然后如果你點擊復選框，它會將activeClass類添加到<div>以便正常情況下它會是紅色，帶有懸停它是正常的藍色。

jQuery 純粹用于添加/刪除類，但其他一切都只是 CSS ...

$(function(){

$("#changeClass").on("click", function() {

$("#myDiv").toggleClass("activeClass", $(this).is(":checked"));

});

#myDiv {

padding:50px;

/* Normal, pink */

background-color:pink;

}

#myDiv:hover {

/* Hover, lightblue */

background-color:lightblue;

}

#myDiv.activeClass {

/* Normal + active, red */

background-color:red;

}

#myDiv.activeClass:hover {

/* Hover + active, blue */

background-color:blue;

}

Hello World

</div>

反對回復 2021-12-23

3 回答
0 關注
161 瀏覽

關注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

當班級處于活動狀態(tài)和非活動狀態(tài)時更改鼠標懸停的背景圖像

當班級處于活動狀態(tài)和非活動狀態(tài)時更改鼠標懸停的背景圖像

3 回答

添加回答