如何改變基於類的佈局？

-2

我在這裏創建一個網站，我需要添加一個功能，即當我將鼠標懸停在某個特定的分區上時，所有其他元素都將被隱藏，並且身體的背景顏色會發生變化，這可以在三種情況下完成。任何例子都是非常可觀的。提前致謝。如何改變基於類的佈局？

發佈參考https://longstoryshortdesign.co.uk/projects

來源

2017-09-19 Anmol Sandal

請您提供迄今所做的代碼。 –

StackOverflow不是代碼寫入服務。您需要進行嘗試，以便我們可以幫助您修復代碼。 – Soviut

我知道，但我需要幫助這裏是什麼stackoverflow是我認爲@Soviut –

你可以嘗試這樣的：

$('your-class-name').hover(
    function() { 
    // your mouse hover event 
    $(this).removeClass("your-class-name"); 
    }, 
    function() { 
    // your mouse out event 
    } 
);

來源

2017-09-19 07:29:58 Developerajay

感謝隊友，我需要刪除另一個功能的鼠標懸停的老班 –

是的，那麼你喜歡這個，請再次檢查我的代碼@AnmolSandal – Developerajay

請標記打勾如果我的回答對你有幫助。 @AnmolSandal – Developerajay

這裏一個CSS的解決方案（沒有jQuery的）。在身體上使用課程

a:hover { 
    background: blue; 
} 
body.case1 a:hover { 
    background: green; 
} 
body.case2 a:hover { 
    background: yellow; 
}

來源

2017-09-19 07:30:01 LinkinTED

你的意思是這樣嗎？

$(document).ready(function() { 
 
$(".project").mouseover(function() { 
 
$(".project").css("opacity","0.5"); 
 
    $(this).css("opacity","1"); 
 
    }); 
 
$(".project").mouseout(function() { 
 
$(".project").css("opacity","1") 
 
}); 
 
    });

div{border:1px solid #b8b8b8; 
 
height:30px;margin-bottom:10px;background:#b8b8b8;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="project project-1 ">This is a division</div> 
 
<div class="project project-2 ">This is a division</div> 
 
<div class="project project-3 ">This is a division</div> 
 
<div class="project project-4 ">This is a division</div> 
 
<div class="project project-5 ">This is a division</div> 
 
<div class="project project-6 ">This is a division</div> 
 
<div class="project project-7 ">This is a division</div>

在此，我們有兩個事件鼠標懸停（）和鼠標移出（）鼠標懸停（）將不透明度改爲0.5背景（可以是任何你喜歡的CSS屬性）

來源

2017-09-19 07:58:39

謝謝@Bhawna這是一個好的方法 –

很高興幫助:) –

剛剛試過用CSS。請檢查

CSS

.test_div { 
    padding:10px; 
    display:inline-block; 
    background:#ccc; 
} 
.test:hover .test_div { 
    background:#ccc; 
    opacity:.5; 
} 
.test .test_div:hover { 
    background:#0ff; 
    opacity: 1; 
}

HTML結構

<div class="test"> 
    <div class="test_div">This is test div</div> 
    <div class="test_div">This is test div</div> 
    <div class="test_div">This is test div</div> 
    <div class="test_div">This is test div</div> 
    <div class="test_div">This is test div</div> 
    <div class="test_div">This is test div</div> 
</div>

感謝

來源

2017-09-26 14:24:03 maheshv13

如何改變基於類的佈局？

回答

相關問題