当前位置： 文江博客话题详情

CSS Hover 适用于一个元素，但不适用于其他元素

发布于 2025-01-15 00:54:03 字数 1821 浏览 2 评论 0原文

我尝试制作一个左右分屏样式的页面。为此，我使用了一个 div ，左侧有一个标题，右侧有一个标题。 我的目标是当鼠标悬停时使它们变大，同时使另一个变小。这对于将鼠标悬停在屏幕左侧非常有用，但是当将鼠标悬停在屏幕右侧时，左侧部分不会变小。 我对两边都做了完全相同的操作，也许元素的特殊性或顺序有问题

（我简化了代码，这就是为什么有 VH 和 VW 以一种奇怪的方式出现）

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#Left {
  height: 100vh;
  width: 50vw;
  background: black;
  color: rgb(127, 127, 127);
  text-align: right;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  transition-property: width, color;
  transition-duration: 500ms;
}

#Right {
  background: white;
  height: 100vh;
  width: 50vw;
  color: rgb(127, 127, 127);
  text-align: left;
  position: fixed;
  top: 0;
  right: 0;
  transition-property: width, color;
  transition-duration: 500ms;
}

h1 {
  padding-left: 5vw;
  padding-right: 5vw;
  padding-top: 5vh;
  padding-bottom: 5vh;
  font-size: min(12vw, 15vh, 20em);
}


/* 
Hover Effects 
*/

#Right:hover {
  width: calc(50vw + 31vh);
  color: black;
}

#Right:hover #Left {
  width: calc(50vw - 31vh);
}

#Left:hover {
  width: calc(50vw + 31vh);
  color: white;
}

#Left:hover~#Right {
  width: calc(50vw - 31vh);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aloïs Jolliet</title>
  <link rel="stylesheet" href="./main.css">
</head>

<body>
  <div id="Left">
    <h1>Left</h1>
  </div>
  <div id="Right">
    <h1>Right</h1>

  </div>
</body>

</html>

原文

I try to make a left-right split screen style page. For that i use a div for with a title for the left and one for the right part.
My aim is to make them bigger when hovering with the mouse and at same time make the other smaller. This works great for hovering over the left side of the screen but when hovering over the right part the left part isn't getting smaller.
I did exactly the same for both sides, maybe there is a problem with the specificity or the order of the elements

(I simplified the code, that's why there's VH and VW in a strange way)

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#Left {
  height: 100vh;
  width: 50vw;
  background: black;
  color: rgb(127, 127, 127);
  text-align: right;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  transition-property: width, color;
  transition-duration: 500ms;
}

#Right {
  background: white;
  height: 100vh;
  width: 50vw;
  color: rgb(127, 127, 127);
  text-align: left;
  position: fixed;
  top: 0;
  right: 0;
  transition-property: width, color;
  transition-duration: 500ms;
}

h1 {
  padding-left: 5vw;
  padding-right: 5vw;
  padding-top: 5vh;
  padding-bottom: 5vh;
  font-size: min(12vw, 15vh, 20em);
}


/* 
Hover Effects 
*/

#Right:hover {
  width: calc(50vw + 31vh);
  color: black;
}

#Right:hover #Left {
  width: calc(50vw - 31vh);
}

#Left:hover {
  width: calc(50vw + 31vh);
  color: white;
}

#Left:hover~#Right {
  width: calc(50vw - 31vh);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aloïs Jolliet</title>
  <link rel="stylesheet" href="./main.css">
</head>

<body>
  <div id="Left">
    <h1>Left</h1>
  </div>
  <div id="Right">
    <h1>Right</h1>

  </div>
</body>

</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

陌生 2025-01-22 00:54:03

https://codepen.io/nkoroloff/pen/ZEvQoqw?editors=1111

我分享了一个解决方案，希望对您有所帮助。如果没有额外的脚本，您将无法更改元素的大小...

jQuery 脚本

$(function() {
  $('#Right').mouseenter(function() {
    $('#Left').addClass("hover-right");
  }).mouseleave(function () {
    $('#Left').removeClass("hover-right");
  });
});

和简单的 CSS

#Left.hover-right {
 width: calc(50vw - 31vw);
}

https://codepen.io/nkoroloff/pen/ZEvQoqw?editors=1111

I've shared a solution, hope it helps. Without additional scripts you can't change size element before...

jQuery script

$(function() {
  $('#Right').mouseenter(function() {
    $('#Left').addClass("hover-right");
  }).mouseleave(function () {
    $('#Left').removeClass("hover-right");
  });
});

and simple CSS

#Left.hover-right {
 width: calc(50vw - 31vw);
}
回复 原文
飘过的浮云 2025-01-22 00:54:03

除了尼克斯之外，我还用简单的 Javascript 回答了我的解决方案。没有jquer。

const right = document.getElementById('Right');
const left = document.getElementById('Left');

right.addEventListener('mouseenter', e => {
  left.classList.add('hover-right');
});

right.addEventListener('mouseleave', e => {
  left.classList.remove('hover-right');
});
* {
 margin: 0;
 padding: 0;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#Left {
 height: 100vh;
 width: 50vw;
 background: black;
 color: rgb(127, 127, 127);
 text-align: right;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 0;
 transition-property: width, color;
 transition-duration: 500ms;
}
#Right {
 background: white;
 height: 100vh;
 width: 50vw;
 color: rgb(127, 127, 127);
 text-align: left;
 position: fixed;
 top: 0;
 right: 0;
 transition-property: width, color;
 transition-duration: 500ms;
}
h1 {
 padding-left: 5vw;
 padding-right: 5vw;
 padding-top: 5vh;
 padding-bottom: 5vh;
 font-size: min(12vw, 15vh, 20em);
}

/* 
Hover Effects 
*/
#Right:hover {
 width: calc(50vw + 31vw);
 color: black;
}
#Left.hover-right {
 width: calc(50vw - 31vw);
}

#Left:hover {
 width: calc(50vw + 31vw);
 color: white;
}
#Left:hover ~ #Right {
 width: calc(50vw - 31vw);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aloïs Jolliet</title>
  <link rel="stylesheet" href="./main.css">
</head>

<body>
  <div id="Left">
    <h1>Left</h1>
  </div>
  <div id="Right">
    <h1>Right</h1>

  </div>
</body>

</html>

In additional to Nicks answer my solution in plain Javascript. Without jquer.

const right = document.getElementById('Right');
const left = document.getElementById('Left');

right.addEventListener('mouseenter', e => {
  left.classList.add('hover-right');
});

right.addEventListener('mouseleave', e => {
  left.classList.remove('hover-right');
});
* {
 margin: 0;
 padding: 0;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#Left {
 height: 100vh;
 width: 50vw;
 background: black;
 color: rgb(127, 127, 127);
 text-align: right;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 0;
 transition-property: width, color;
 transition-duration: 500ms;
}
#Right {
 background: white;
 height: 100vh;
 width: 50vw;
 color: rgb(127, 127, 127);
 text-align: left;
 position: fixed;
 top: 0;
 right: 0;
 transition-property: width, color;
 transition-duration: 500ms;
}
h1 {
 padding-left: 5vw;
 padding-right: 5vw;
 padding-top: 5vh;
 padding-bottom: 5vh;
 font-size: min(12vw, 15vh, 20em);
}

/* 
Hover Effects 
*/
#Right:hover {
 width: calc(50vw + 31vw);
 color: black;
}
#Left.hover-right {
 width: calc(50vw - 31vw);
}

#Left:hover {
 width: calc(50vw + 31vw);
 color: white;
}
#Left:hover ~ #Right {
 width: calc(50vw - 31vw);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aloïs Jolliet</title>
  <link rel="stylesheet" href="./main.css">
</head>

<body>
  <div id="Left">
    <h1>Left</h1>
  </div>
  <div id="Right">
    <h1>Right</h1>

  </div>
</body>

</html>

回复 原文
萌能量女王 2025-01-22 00:54:03

这可以在没有 JavaScript 的情况下完成 - 如果您利用这一事实，则悬停一个元素也总是意味着您同时悬停其父元素。

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#Left {
  height: 100vh;
  width: 50vw;
  background: black;
  color: rgb(127, 127, 127);
  text-align: right;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  transition-property: width, color;
  transition-duration: 500ms;
}

#Right {
  background: white;
  height: 100vh;
  width: 50vw;
  color: rgb(127, 127, 127);
  text-align: left;
  position: fixed;
  top: 0;
  right: 0;
  transition-property: width, color;
  transition-duration: 500ms;
}

h1 {
  padding-left: 5vw;
  padding-right: 5vw;
  padding-top: 5vh;
  padding-bottom: 5vh;
  font-size: min(12vw, 15vh, 20em);
}


/* 
Hover Effects 
*/

#Parent:hover #Right:hover {
  width: calc(50vw + 31vh);
  color: black;
}

#Parent:hover #Left {
  width: calc(50vw - 31vh);
}

#Parent:hover #Left:hover {
  width: calc(50vw + 31vh);
  color: white;
}

#Parent:hover #Right {
  width: calc(50vw - 31vh);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aloïs Jolliet</title>
  <link rel="stylesheet" href="./main.css">
</head>

<body>
  <div id="Parent">
    <div id="Left">
      <h1>Left</h1>
    </div>
    <div id="Right">
      <h1>Right</h1>
    </div>
  </div>
</body>

</html>

This can be done without JavaScript - if you make use of the fact, that hovering an element also always means you are hovering its parent at the same time.

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#Left {
  height: 100vh;
  width: 50vw;
  background: black;
  color: rgb(127, 127, 127);
  text-align: right;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  transition-property: width, color;
  transition-duration: 500ms;
}

#Right {
  background: white;
  height: 100vh;
  width: 50vw;
  color: rgb(127, 127, 127);
  text-align: left;
  position: fixed;
  top: 0;
  right: 0;
  transition-property: width, color;
  transition-duration: 500ms;
}

h1 {
  padding-left: 5vw;
  padding-right: 5vw;
  padding-top: 5vh;
  padding-bottom: 5vh;
  font-size: min(12vw, 15vh, 20em);
}


/* 
Hover Effects 
*/

#Parent:hover #Right:hover {
  width: calc(50vw + 31vh);
  color: black;
}

#Parent:hover #Left {
  width: calc(50vw - 31vh);
}

#Parent:hover #Left:hover {
  width: calc(50vw + 31vh);
  color: white;
}

#Parent:hover #Right {
  width: calc(50vw - 31vh);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aloïs Jolliet</title>
  <link rel="stylesheet" href="./main.css">
</head>

<body>
  <div id="Parent">
    <div id="Left">
      <h1>Left</h1>
    </div>
    <div id="Right">
      <h1>Right</h1>
    </div>
  </div>
</body>

</html>

回复 原文
~没有更多了~

关于作者

奶茶白久

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

眼泪淡了忧伤

文章 0 评论 0

corot39

文章 0 评论 0

守护在此方

文章 0 评论 0

github_3h15MP3i7

文章 0 评论 0

相思故

文章 0 评论 0

滥情空心

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文