CSS鼠標懸停穿越

我有2個文本元素，當鼠標懸停在它們的中間時，我需要同時觸發鼠標懸停事件。這是我的代碼：CSS鼠標懸停穿越

div { 
 
    position: absolute; 
 
} 
 
.div1 { 
 
    display: block; 
 
    background: red; 
 
    -webkit-transition: left 2s; 
 
    transition: left 2s; 
 
    left: 10px; 
 
} 
 
.div2 { 
 
    display: block; 
 
    background: green; 
 
    transition: left 2s; 
 
    left: 50px; 
 
} 
 
.div1:hover { 
 
    left: 100px; 
 
} 
 
.div2:hover { 
 
    left: 0px; 
 
}

<div class="div1">paifjopweijfopaiwjef</div> 
 
<div class="div2">fpaowiejfoaweafjweoi</div>

當鼠標進入2種元素的重疊區域，我想同時觸發轉換。第二個div過渡正在工作，但第一個不起作用。看起來鼠標懸停事件不會「跌落」。那麼我怎麼能觸發這兩個？

來源

2016-01-25 John

當鼠標進入2格的交集區域，我想觸發兩個轉換。 – John

@ Trix我編輯了這個問題。 – John

請檢查我的答案，並告訴我這是否是所需的輸出。你是否仍然需要他們獨立行事？ – Trix

做這樣的：

div { 
 
    position: absolute; 
 
} 
 
.div1 { 
 
    display: block; 
 
    background: red; 
 
    -webkit-transition: left 2s; 
 
    transition: left 2s; 
 
    left: 10px; 
 
} 
 
.div2 { 
 
    display: block; 
 

 
    background: green; 
 
    transition: left 2s; 
 
    left: 50px; 
 
} 
 

 
.parent:hover .div1{ 
 
    left: 100px; 
 
} 
 
.parent:hover .div2{ 
 
    left: 0px; 
 
}

<div class="parent"> 
 
    <div class="div1">paifjopweijfopaiwjef</div> 
 
    <div class="div2">fpaowiejfoaweafjweoi</div> 
 
</div>

來源

2016-01-25 02:32:14 Trix

父把你的div元素都在另一個div和檢測:hover爲：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
    position: absolute; 
} 
.div1 { 
    display: block; 
    background: red; 
    -webkit-transition: left 2s; 
    transition: left 2s; 
    left: 10px; 
} 
.div2 { 
    display: block; 

    background: green; 
    transition: left 2s; 
    left: 50px; 
} 

div.parent:hover .div2 { 
    left: 0px; 
} 
div.parent:hover .div1 { 
    left:100px; 
} 
</style> 
</head> 
<body> 
<div class="parent"> 
    <div class="div1">paifjopweijfopaiwjef</div> 
    <div class="div2">fpaowiejfoaweafjweoi</div> 
</div> 

</body> 
</html>

來源

2016-01-25 02:33:35 mani

CSS鼠標懸停穿越

回答

相關問題