css 如何设置它，以便当我将鼠标悬停在项目2上时，项目1会发生变化？

u59ebvdq 于 2023-02-14 发布在其他

关注(0)|答案(2)|浏览(93)

当我将鼠标悬停在第2项上时，我试图使该函数变大，悬停在第1项上时，我试图使其缩小，悬停在其中的文本旋转。
有没有办法用CSS或JavaScript来做呢？
到目前为止，我设法使它工作时，我悬停在项目1和项目2收缩。
这是我目前掌握的情况：

container {
  width: 100%;
  display: flex;
}

h2 {
  font-size: 40px;
}

#box1 {
  position: relative;
  background: #154c79;
  height: 600px;
  color: white;
  text-align: center;
  float: left;
  flex: 1;
}

#box1:hover {
  transition: width 2s;
  text-align: center;
  flex: 10;
}

#box1:hover~#box2 {
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-align: center;
  font-size: 50px;
  flex: 1;
}

#box2 {
  position: relative;
  background: #FBCEB1;
  height: 600px;
  color: white;
  text-align: center;
  float: right;
  flex: 1;
}

#box2:hover {
  transition: width 2s;
  text-align: center;
  flex: 10
}

#box2:hover~#box1 {
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-align: center;
  font-size: 50px;
  flex: 1;
}

<div class="container">
  <div id="box1">
    <h2>Box 1</h2>
  </div>
  <div id="box2">
    <h2>Box 2</h2>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/75414080/how-can-i-set-it-so-item-1-changes-when-i-hover-on-item-2

2条答案

按热度按时间

zxlwwiss1#

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightgray;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  transition: all 0.5s ease-in-out;
}

.item-1:hover {
  transform: scale(0.5);
}

.item-2:hover {
  transform: rotate(360deg) scale(1.5);
}

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
</div>

"如果有用就试试这个"

赞(0）回复(0）举报 2023-02-14

js4nwp542#

我找到解决办法了

container {
    width: 100%;
    display: flex;
}

h2 {
    font-size: 40px;
}

#box1 {
    position: relative;
    background: #154c79;
    height: 600px;
    color: white;
    text-align: center;
    float: left;
    flex: 1;
}

#box1:hover {
    transition: width 2s;
    text-align: center;
    flex: 10;
}

#box1:hover ~ #box2 {
    writing-mode: vertical-lr;
    text-orientation: upright;
    text-align: center;
    font-size: 50px;
}

#box2 {
    position:relative;
    background: #FBCEB1;
    height: 600px;
    color: white;
    text-align: center;
    float: right;
    flex: 1;   
}

#box2:hover {
    transition: width 2s;
    text-align: center;
    flex: 10
}

#box1:has(+#box2:hover) {   
    writing-mode: vertical-lr;
    text-orientation: upright;
    text-align: center;
    font-size: 50px;
}

<div class="container">
            <div id="box1"> <h2>Box 1</h2>
            <div id="box2"> <h2>Box 2</h2>
            </div>
        </div>

赞(0）回复(0）举报 2023-02-14

我来回答

css 如何设置它，以便当我将鼠标悬停在项目2上时，项目1会发生变化？

2条答案

相关问题

热门标签

最新问答