Question

我的问题是：我需要一种方法来捕捉aside section:hover，反之亦然，或另一种（CSS）方式来应用this过渡。我希望悬停元素从当前width转到100vw，同时我希望其他元素width转到0vw，这应该是在特定的时间发生（2s在这里）。

如果有使用其他选择器而不是~选择器的解决方案，或完全不同的方式，则不是问题。

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。~~

Answer 1

def counter(start, n=5) # n is optional 
  ary = (start..(start+n)).to_a
  ary.map {|i| print i == ary.last ?  i.to_s: i.to_s + " hello " }
  #you can change the i after question mark to i+1
end

2.2.0 :021 > counter(5) #will print 5 times, starts with 5
5 hello 6 hello 7 hello 8 hello 9 hello 10

2.2.0 :022 > counter(10, 5) # will print 5 times
10 hello 11 hello 12 hello 13 hello 14 hello 15

2.2.0 :028 > counter(3, n=7) # will print 7 times
3 hello 4 hello 5 hello 6 hello 7 hello 8 hello 9 hello 10

2.2.0 :029 > counter(3,7) #same as above
3 hello 4 hello 5 hello 6 hello 7 hello 8 hello 9 hello 10

*,
*: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);
}

但是Aside的行为与Section的行为并不相似;

<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);
}

Answer 2

第一个也没有工作 - 它只是将黑色div推到底部。在CSS悬停后，您不能使用兄弟选择器。

有几种方法可以解决这个问题。如果不重新安排你的DOM，最合适的东西可能是flexbox。

package main

import (
    "encoding/json"
    "fmt"

    elastic "gopkg.in/olivere/elastic.v2"
)

func main() {

    termQuery := elastic.NewTermQuery("message", "configuration")

    timeRangeFilter := elastic.NewRangeFilter("@timestamp").Gte(1442100154219).Lte(1442704954219)

    // Not sure this one is really useful, I just put it here to mimic what you said is the expected result
    boolFilter := elastic.NewBoolFilter().Must(timeRangeFilter)

    query := elastic.NewFilteredQuery(termQuery).Filter(boolFilter)

    queryBytes, err := json.MarshalIndent(query.Source(), "", "\t")
    if err != nil {
        panic(err)
    }

    fmt.Println(string(queryBytes))
}

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

Answer 3

这是一个jQuery解决方案：

＆＃13;

$("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%");
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

CSS3过渡和DOM，奇怪的行为

3 个答案: