CSS3過渡和DOM，怪異的行爲

我的問題是：我需要一種方法來捕捉aside時section:hover，反之亦然，或將this過渡另一個（CSS）的方式。我希望懸停的元素從當前的width到100vw，同時我希望其他元素的width轉到0vw，這應該發生在特定時間（此處爲2秒）。CSS3過渡和DOM，怪異的行爲

如果存在使用其他選擇器而不是~選擇器的解決方案，或者採用完全不同的方式，則不存在問題。

CSS：

aside, section { 
    width: 50%; 
    height: 100vh; 
    float: left; 
    -webkit-transition: width 2s, display 2s; /* time updated */ 
    transition: width 2s, display 2s; /* time updated */ 
    background-color: red; 
} 

section { 
    background-color:black; 
} 

section:hover, aside:hover { 
    width: 100vw; 
} 

aside:hover ~ section /* work */ ,section:hover ~ aside /* invalid selector */ { 
    width: 0vw;               
}

HTML：

<body> 
    <aside></aside> 
    <section></section> 
</body>

這是我的sample，並有一個錯誤的浮動問題（在second_element旁邊：懸停選擇問題）。

~~當我交換HTML <aside>部分時，行爲也在交換，所以第一個DOM元素的轉換正常，但第二個不是。交換後這是sample。~~

來源

2015-09-20 Amr

什麼是你正在尋找確切的結果？ –

@ Maximillian我希望懸停的元素從當前寬度 - > 100vw，同時我希望其他元素的寬度爲0vw，這應該發生在特定的時間（這裏2s）。 – Amr

CSS中的兄弟選擇器只能在DOM中當前元素下面的兄弟元素中工作，所以沒有純粹的CSS方法來完成這項工作，據我所知。它只會根據元素的順序對「擱置」或「節」起作用。 – Harry

注：這是最好的教育的黑客使用絕對定位和隱藏的溢出。我通常不會向任何人推薦這種方法，但是由於您打算使用僅CSS解決方案，因此我將此作爲答案。

我們可以通過絕對定位這兩個元素，然後在懸停期間調整它們的定位屬性+ width來實現您要查找的內容。對父母而言，overflow: hidden對於此方法的整個工作很重要。

這仍然不是100％完美，因爲您會發現懸停在紅色方塊上並不能抵消黑色方塊，而只是看起來會越過黑色方塊而不像黑色方塊懸停時發生的情況。如果不使用腳本，我不認爲你可以更靠近它。

這種方法優於其他任何可能的方法的優點是，這個應該工作，即使在舊版瀏覽器，因爲我們沒有真正使用任何新的屬性。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 
section, 
 
aside { 
 
    position: absolute; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    vertical-align: middle; 
 
    width: 50vw; 
 
    height: 400px; 
 
    color: white; 
 
    padding: 4px; 
 
    transition: all 1s linear; 
 
} 
 
section { 
 
    right: 0%; 
 
    background: red; 
 
} 
 
aside { 
 
    right: 50%; 
 
    background: black; 
 
} 
 
section:hover, 
 
aside:hover { 
 
    width: 100vw; 
 
} 
 
aside:hover { 
 
    right: 0%; 
 
} 
 
aside:hover + section { 
 
    right: -50%; 
 
}

<body> 
 
    <aside>Some lengthy content 
 
    <br/>with line breaks.</aside> 
 
    <section>Some lengthy content 
 
    <br/>with line breaks.</section> 
 
</body>

來源

2015-09-20 08:55:19 Harry

在Chrome 45中（我不知道其他瀏覽器），一個小錯誤：白色空間（寬度不等）出現一段時間（位於divs之間或左側），它會在盤旋之後出現，直到它達到100 ％然後懸停部分，同時移動到原來的位置。 **需要嘗試檢測。 – Amr

關於我：永遠追求完美，盡善盡美，謝謝你的努力。 – Amr

對，你知道了 – Amr

第一個也不起作用 - 它只是將黑色的div推到底部。 CSS懸停後不能使用兄弟選擇器。

有幾種方法可以解決這個問題。如果不重新安排DOM，最合適的可能是flexbox。

body { 
    display: flex; 
    width: 100%; 
} 
aside, section{ 
    flex: 0 1 auto; 
    height: 100vh; 
    width:50vw; 
    -webkit-transition: all 10s linear; 
    transition: all 10s linear; 
    background-color:red; 
} 

aside:hover, section:hover { 
    width: 100vw; 
} 

section {background-color:black;}

http://jsfiddle.net/u6o7emfr/7/

來源

2015-09-20 04:53:14 Harangue

任何財產的價值100000％可能是不好的做法。 – TylerH

我知道它沒有工作，我把樣品，以幫助在問題檢測，我的目標是通過過渡（時間> 0s）在你的例子過渡不起作用（因爲它取決於懸停），謝謝。 – Amr

@TylerH我意識到這一點，但除非你有更好的解決方案？ – Harangue

這裏是一個jQuery解決方案：

$("aside").hover(function(){ 
 
    $(this).prev().css("width","0%"); 
 
}, function(){ 
 
    $(this).prev().css("width","50%"); 
 
}); 
 

 
$("section").hover(function(){ 
 
    $(this).css("width","100%"); 
 
}, function(){ 
 
    $(this).css("width","50%"); 
 
});

section { 
 
    background: red; 
 
    float: left; 
 
    width: 50%; 
 
    height: 400px; 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
aside { 
 
    background: black; 
 
    width: 100%; 
 
    height: 400px; 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <section></section> 
 
    <aside></aside> 
 
</body>

來源

2015-09-20 05:42:35

如果有一天我們可以改變以前的元素或至少CSS中的父元素，這將是可能的PURE CSS。 –

我的second_element：懸停選擇器是錯誤的，我在這裏要求找到一個全新的方式來做到這一點，我用你的解決方案結果來澄清我的目標，我希望它沒關係。 – Amr

您的選擇器錯誤，因爲'〜'是用於在主選擇器之後更改元素。但在旁邊是部分之前，你不能用CSS來改變它。 –

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
html { 
 
    box-sizing: border-box; 
 
} 
 
html, body { 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body { 
 
    overflow: hidden; 
 
    display: flex; 
 
    width: 200%; 
 
} 
 

 

 
.Box { 
 
    width: 50vw; 
 
    height: 100%; 
 
    position: relative; 
 
    transform: translateX(0%); 
 
    transition: all 2s ease-in; 
 
    z-index: 1; 
 
} 
 
.Box:hover { 
 
    z-index: 2; 
 
    width: 100vw; 
 
} 
 
.Box:after { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    font-size: calc(4vw + 4vh + 2vmin); 
 
} 
 

 
.Section { 
 
    background-color: red; 
 
} 
 
.Section:hover { 
 
    transform: translateX(0%); 
 
} 
 
.Section:after { 
 
    content: '#Section'; 
 
    color: rgba(0,0,0,.2); 
 
} 
 

 
.Aside { 
 
    background-color: black; 
 
} 
 
.Aside:hover { 
 
    transform: translateX(-50%); 
 
} 
 
.Aside:after { 
 
    content: '#Aside'; 
 
    color: rgba(255,0,0,.8); 
 
}

<body> 
 
    <section class="Box Section"></section> 
 
    <aside class="Box Aside"></aside> 
 
</body>

但除了行爲並不像部分的行爲類似;

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
html { 
 
    box-sizing: border-box; 
 
} 
 
html, body { 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body { 
 
    overflow: hidden; 
 
    display: flex; 
 
    width: 200%; 
 
} 
 

 

 
.Box { 
 
    width: 50vw; 
 
    height: 100%; 
 
    position: relative; 
 
    transform: translateX(0%); 
 
    transition: all 2s ease-in; 
 
    z-index: 1; 
 
} 
 
.Box:hover { 
 
    z-index: 2; 
 
    width: 100vw; 
 
} 
 
.Box:after { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    font-size: calc(4vw + 4vh + 2vmin); 
 
} 
 

 
.Section { 
 
    background-color: red; 
 
    order: 2; 
 
} 
 
.Section:hover { 
 
    transform: translateX(-50%); 
 
} 
 
.Section:after { 
 
    content: '#Section'; 
 
    color: rgba(0,0,0,.2); 
 
} 
 
.Section:hover ~ .Aside { 
 
    transform: translateX(-100%); 
 
    transition: all 2s ease-in 1s; 
 
} 
 

 
.Aside { 
 
    background-color: black; 
 
    order: 1; 
 
} 
 
.Aside:hover { 
 
    transform: translateX(0%); 
 
} 
 
.Aside:after { 
 
    content: '#Aside'; 
 
    color: rgba(255,0,0,.8); 
 
}

<body> 
 
    <section class="Box Section"></section> 
 
    <aside class="Box Aside"></aside> 
 
</body>

來源

2015-09-20 09:32:09 0x860111

它工作的很好，謝謝你.. + 1 – Amr

CSS3過渡和DOM，怪異的行爲

回答

相關問題