文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >在悬停时更改背景或颜色

问在悬停时更改背景或颜色
EN

Stack Overflow用户
提问于 2020-01-24 04:18:19
回答 3查看 126关注 0票数 0

有没有一种简单的方法，当光标在黑色的div上时，改变颜色或背景颜色，并在白色的“光标区域”中显示它们？

我知道如果您在悬停时更改黑色div颜色和z索引是可能的，但是有没有办法通过白色光标来实现-这样我就不必修改我想要在光标上方显示的每个div。

编辑:我创建了一个新的代码站点。因此，我希望‘Hello’-文本在白色光标位于其上时变为黑色。黑色的“hello”文本应出现在白色区域中

​

代码语言：javascript
运行
复制
// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
    e.stopPropagation();
    var x = e.clientX;
    var y = e.clientY;
    cursor.style.left = x + 'px';
    cursor.style.top = y + 'px';
});

// Cursor HOVER modified - When hovering an element
var cursor = document.getElementById('cursor');
var clickableCursor = document.getElementsByClassName('clickableCursor');

for (var i = 0; i < clickableCursor.length; i++) {
    clickableCursor[i].addEventListener('mouseover', () => {
        cursor.style.height = "80px";
        cursor.style.width = "80px";
        cursor.style.animation = "cursorAnimation 5s linear infinite";
        cursor.style.background = "white";
    });
    clickableCursor[i].addEventListener('mouseout', () => {
        cursor.style.height = "40px";
        cursor.style.width = "40px";
        cursor.style.animation = "none";
        cursor.style.border = "2px solid white";
      cursor.style.background = "none";
    });
}
代码语言：javascript
运行
复制
body {
  cursor: none;
}

.container {
  height: 3000px;
  width: 100%;
  position: relative;
  background: orange;
}

#cursor {
  backface-visibility: hidden;
  z-index: 1000000000;
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid white;
  transition: .1s;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 100ms;
  transition-timing-function: ease-out;
}

#cursor::before {
  content: '';
  position: absolute;
  height: 7px;
  width: 7px;
  border-radius: 100%;
  background-color: white;
}

.clickableCursor {
  font-size: 50px;
  color: white;
  position: fixed;
  background: black;
  padding: 50px
}

.one {
  top: 50px;
  left: 50px;
}

.two {
  top: 50px;
  right: 50px;
}
代码语言：javascript
运行
复制
<div class="container">
  <div id="cursor"></div>
  <p class="clickableCursor one"> Hello </p>
</div>

​

html
css
javascript
EN

回答 3

Stack Overflow用户

发布于 2020-01-24 04:38:32

更新的问题的更新

用div替换<p>，放入<div id="cursor"></div>。

然后用<span>对文本进行换行，使css

代码语言：javascript
运行
复制
.text:hover {
  color: black;
  z-index: 1000000001; /*higher that #cursor's*/
  position: relative; /*this is neede to z-index work*/
}

另外，如果你用<div>替换<span>，从.clickableCursor中去掉padding，把它放到.text，现在是<div>，结果会更好。在代码片段中查找。

​

代码语言：javascript
运行
复制
// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
    e.stopPropagation();
    var x = e.clientX;
    var y = e.clientY;
    cursor.style.left = x + 'px';
    cursor.style.top = y + 'px';
});

// Cursor HOVER modified - When hovering an element
var cursor = document.getElementById('cursor');
var clickableCursor = document.getElementsByClassName('clickableCursor');

for (var i = 0; i < clickableCursor.length; i++) {
    clickableCursor[i].addEventListener('mouseover', () => {
        cursor.style.height = "80px";
        cursor.style.width = "80px";
        cursor.style.animation = "cursorAnimation 5s linear infinite";
        cursor.style.background = "white";
    });
    clickableCursor[i].addEventListener('mouseout', () => {
        cursor.style.height = "40px";
        cursor.style.width = "40px";
        cursor.style.animation = "none";
        cursor.style.border = "2px solid white";
      cursor.style.background = "none";
    });
}
代码语言：javascript
运行
复制
body {
  cursor: none;
}

.container {
  height: 3000px;
  width: 100%;
  position: relative;
  background: orange;
}

#cursor {
  backface-visibility: hidden;
  z-index: 1000000000;
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid white;
  transition: .1s;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 100ms;
  transition-timing-function: ease-out;
}

#cursor::before {
  content: '';
  position: absolute;
  height: 7px;
  width: 7px;
  border-radius: 100%;
  background-color: white;
}

.clickableCursor {
  font-size: 50px;
  color: white;
  position: fixed;
  background: black;

}

.one {
  top: 50px;
  left: 50px;
}

.two {
  top: 50px;
  right: 50px;
}

.text {
  padding: 50px
}

.text:hover {
  color: black;
  z-index: 1000000001;
  position: relative;
}
代码语言：javascript
运行
复制
<div class="container">
  
  <div class="clickableCursor one">
    <div id="cursor"></div>
    <div class="text">
      Hello
    </div>
  </div>
</div>

​

票数 1
EN

Stack Overflow用户

发布于 2020-01-24 04:53:33

由于您的光标是白色的，您可以考虑将mix-blend-mode与变暗的值一起使用。你必须调整你的代码来添加一个额外的包装器，以将混合混合模式效果与背景隔离开来。

你也可以简化你的JS代码，只考虑CSS的悬停效果：

​

代码语言：javascript
运行
复制
// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
  e.stopPropagation();
  var x = e.clientX;
  var y = e.clientY;
  cursor.style.left = x + 'px';
  cursor.style.top = y + 'px';
});
代码语言：javascript
运行
复制
body {
  cursor: none;
  margin: 0;
}

.container {
  height: 3000px;
  width: 100%;
  position: relative;
  background: orange;
}

#cursor {
  backface-visibility: hidden;
  z-index: 100000;
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid white;
  background: radial-gradient(circle 4px, #fff 98%, transparent 100%);
  transition: .1s ease-out;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: darken;
}

.clickableCursor {
  position: fixed;
  height: 20px;
  width: 20px;
  background: black;
}

.clickableCursor:hover~#cursor {
  width: 80px;
  height: 80px;
  background: white;
}
.clickableCursor:hover {
  background:blue;
}

.one {
  top: 50px;
  left: 50px;
}

.two {
  top: 50px;
  right: 50px;
}

.three {
  bottom: 50px;
  left: 50px;
}

.four {
  bottom: 50px;
  right: 50px;
}
代码语言：javascript
运行
复制
<div class="container">
  <div style="isolation:isolate">
    <div class="clickableCursor one"></div>
    <div class="clickableCursor two"></div>
    <div class="clickableCursor three"></div>
    <div class="clickableCursor four"></div>
    <div id="cursor"></div>
  </div>
</div>

​

票数 1
EN

Stack Overflow用户

发布于 2020-01-24 04:39:36

为什么不使用:hover？它工作得很好--或者我没有理解你。

​

代码语言：javascript
运行
复制
// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
    e.stopPropagation();
    var x = e.clientX;
    var y = e.clientY;
    cursor.style.left = x + 'px';
    cursor.style.top = y + 'px';
});

// Cursor HOVER modified - When hovering an element
var cursor = document.getElementById('cursor');
var clickableCursor = document.getElementsByClassName('clickableCursor');

for (var i = 0; i < clickableCursor.length; i++) {
    clickableCursor[i].addEventListener('mouseover', () => {
        cursor.style.height = "80px";
        cursor.style.width = "80px";
        cursor.style.animation = "cursorAnimation 5s linear infinite";
        cursor.style.background = "white";
    });
    clickableCursor[i].addEventListener('mouseout', () => {
        cursor.style.height = "40px";
        cursor.style.width = "40px";
        cursor.style.animation = "none";
        cursor.style.border = "2px solid white";
      cursor.style.background = "none";
    });
}
代码语言：javascript
运行
复制
body {
  cursor: none;
}

.container {
  height: 3000px;
  width: 100%;
  position: relative;
  background: orange;
}

#cursor {
  backface-visibility: hidden;
  z-index: 1000000000;
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid white;
  transition: .1s;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 100ms;
  transition-timing-function: ease-out;
}

#cursor::before {
  content: '';
  position: absolute;
  height: 7px;
  width: 7px;
  border-radius: 100%;
  background-color: white;
}

.clickableCursor {
  position: fixed;
  height: 20px;
  width: 20px;
  background: black;
}

.clickableCursor:hover {
  z-index: 1000000001;
  background: red;
}

.one {
  top: 50px;
  left: 50px;
}

.two {
  top: 50px;
  right: 50px;
}

.three {
  bottom: 50px;
  left: 50px;
}

.four {
  bottom: 50px;
  right: 50px;
}
代码语言：javascript
运行
复制
<div class="container">
  <div id="cursor"></div>
  <div class="clickableCursor one"></div>
  <div class="clickableCursor two"></div>
  <div class="clickableCursor three"></div>
  <div class="clickableCursor four"></div>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/59886455

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档