如何使用JavaScript重写CSS ?

我创建了一个有三个方形图像的HTML页面，每个图像都在一个复选框的标签中。我创建了一个JavaScript函数来检查选中了多少个复选框。

对于每个输入(这是一个复选框)，我添加了一个事件侦听器，它的目标是将选中的复选框的数量限制为两个。我使用了CSS，所以当图像被选中或悬停时，会出现一个红色边框。

我的问题是，当我取消选中图像时，因为我的鼠标仍然在它上面，我无法看到它是未选中的，直到我的鼠标不在图像上。

那么，当图像未选中时，即使鼠标仍在其上，我如何重写CSS并隐藏或删除边框?我想使用纯JavaScript。

function checkedtimes(checkboxes) {
return checkboxes
.map(checkbox => document.getElementById(checkbox).checked)
.reduce((x, y) => x + y)
}
let logos = ["green","yellow","blue"]
for (let logo of logos) {
logo = document.getElementById(logo)
logo.addEventListener('change', e=> {
e.preventDefault()
if (logo.checked) {
if (checkedtimes(logos)>2) {
logo.checked = false
}
}
else {

}
})
}


#logos {
display: flex;
justify-content: center;
}

.logo {
display: none;
}
.logo-label {
display: inline-block;
margin: 10px;
text-align: center;
}
.logo:checked + .logo-label>img, .logo:hover + .logo-label>img {
border: solid 2px red;
}

<head>
</head>
<body>
<form id="form">

<div id="logos">
<input type="checkbox" id="green" class="logo" />
<label for="green" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAgAAAewB9vX2MxIybzJsAeQCr1Ku42rgAdwC527mBv4HZ7NkAcwB0uXR4unj8/vzz9/Pk8OTP5s/I4siy17KRx5GgzqCOxY6ezZ4n9oUoAAABg0lEQVR4nO3dS24CQQwA0Z4/zQx/BnL/k2aQyCLZBCEhKHe9E7jkrSWn3f4wHk+nPORzv2jv5uaX+mnr5l9z+4BL/4ghD3+M6TytFt2P6mN1T5k2qe9SZFVdQOElfGFbvXuIl7KQz0I+C/ks5LOQr4jCOXxhYyGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIV0RhbSGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8hVRuA5fGP9iyEI4C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5Cui8Bq+MP6fGQvhLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5iij8Cl/Yd+8e4qUs5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQbykcwhfm8IXxd2ghnIV8FvJZyGchn4V8FvLdCqcqstU2jZs6sm3+Bjn6EUWa4rsaAAAAAElFTkSuQmCC">
<br>
green
</label>
<input type="checkbox" id="yellow" class="logo"/>
<label for="yellow" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAQlBMVEX//wCHhwB4eABqagBcXABRUQBeXgB6egCDgwBaWgBUVAAqKgCMjAAICAAsLAAwMAA2NgA/PwBERABzcwBmZgBISABKZ9uGAAABoUlEQVR4nO3dS07DQBAG4Z74FSfmFYf7XxUWLAAhgZBarfLUdwDrr6U1I008PD49v9xu0zRd5nGchw/7cvpkaf92/vKhHyzLPvzB/X3db+Z1+u5yjTWObYu5ekKyFmP1hGQt7tUTkrUYqicks5DPQj4L+Szks5Cvh8K9ekKyFkv1hGQtTtUTklnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXw9nB+26gnJLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9Cvhbn6gnJergxdPxbXxbSWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWcjXQ6G3Teh6eGfGQjoL+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+VrM1ROStRirJySzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTrofD4p9xr9YRkLS7VE5K1mKonJLOQz0I+C/ks5LOQz0I+C/l6KDz6H/AW160d2fb6BtUzB8w8fMwHAAAAAElFTkSuQmCC">
<br>
yellow
</label>
<input type="checkbox" id="blue" class="logo"/>
<label for="blue" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAAP99ff+MjP+bm/+rq/+4uP+2tv+pqf+Kiv+Bgf/Z2f90dP94eP/8/P/z8//k5P/Pz//IyP+ysv+Rkf+Vlf+goP+urv+kpP+Ojv/Q7Co7AAABmUlEQVR4nO3dS04DMRAG4e5kJm8eCUng/ieFBQvEhgip1apxfb7AX0tLlhxPzy+H1/N5nufLNE3b9be31U+7/Lf96k/X9QNu0wPu82+bQ1xi2Y4xdU8olgMUvndPKJax7p5QzEI+C/ks5LOQz0K+EQqv3ROKZay6JxSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5RijcdU8oll9n2Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQr6MffeEYiO8GFr+qy8L6Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5Av46N7QrER/pmxkM5CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkG+Ewlv3hGIZ2+4JxTKm7gnFLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTLuHdPKJax6Z5QLGPunlDMQj4L+Szks5DPQj4L+SzkG6Fw6TfgUxyOuWSn+RNFSAfbc4zH5wAAAABJRU5ErkJggg==">
<br>
blue
</label>
</div>
</form>
</body>

这是更面向js的解决方案，但我想可以为您工作。

我在img上使用mouseenter和mouseleave来模拟悬浮.

img上的额外click事件，如果检查了logo并单击了img,border将设置为none，否则border将设置为solid 2px red。

function checkedtimes(checkboxes) {
return checkboxes
.map(checkbox => document.getElementById(checkbox).checked)
.reduce((x, y) => x + y)
}
let logos = ["green","yellow","blue"]
for (let logo of logos) {
logo = document.getElementById(logo)
logo.addEventListener('change', e=> {
e.preventDefault()
if (logo.checked) {
if (checkedtimes(logos)>2) {
logo.checked = false
}
}
else {

}
})
const image = logo.nextElementSibling.firstElementChild;
image.addEventListener('mouseenter',e=>{
if(!logo.checked){
image.style.border = 'solid 2px red';
}
})
image.addEventListener('mouseleave',e=>{
if(!logo.checked){
image.style.border = 'none';
}
})
image.addEventListener('click',e=>{
if(logo.checked){
image.style.border = 'none';
}
else {
image.style.border = 'solid 2px red';
}
})
}

#logos {
display: flex;
justify-content: center;
}

.logo {
display: none;
}
.logo-label {
display: inline-block;
margin: 10px;
text-align: center;
}
.logo:checked + .logo-label>img {
border: solid 2px red;
}

<head>
</head>
<body>
<form id="form">

<div id="logos">
<input type="checkbox" id="green" class="logo" />
<label for="green" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAgAAAewB9vX2MxIybzJsAeQCr1Ku42rgAdwC527mBv4HZ7NkAcwB0uXR4unj8/vzz9/Pk8OTP5s/I4siy17KRx5GgzqCOxY6ezZ4n9oUoAAABg0lEQVR4nO3dS24CQQwA0Z4/zQx/BnL/k2aQyCLZBCEhKHe9E7jkrSWn3f4wHk+nPORzv2jv5uaX+mnr5l9z+4BL/4ghD3+M6TytFt2P6mN1T5k2qe9SZFVdQOElfGFbvXuIl7KQz0I+C/ks5LOQr4jCOXxhYyGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIV0RhbSGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8hVRuA5fGP9iyEI4C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5Cui8Bq+MP6fGQvhLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5iij8Cl/Yd+8e4qUs5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQbykcwhfm8IXxd2ghnIV8FvJZyGchn4V8FvLdCqcqstU2jZs6sm3+Bjn6EUWa4rsaAAAAAElFTkSuQmCC">
<br>
green
</label>
<input type="checkbox" id="yellow" class="logo"/>
<label for="yellow" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAQlBMVEX//wCHhwB4eABqagBcXABRUQBeXgB6egCDgwBaWgBUVAAqKgCMjAAICAAsLAAwMAA2NgA/PwBERABzcwBmZgBISABKZ9uGAAABoUlEQVR4nO3dS07DQBAG4Z74FSfmFYf7XxUWLAAhgZBarfLUdwDrr6U1I008PD49v9xu0zRd5nGchw/7cvpkaf92/vKhHyzLPvzB/X3db+Z1+u5yjTWObYu5ekKyFmP1hGQt7tUTkrUYqicks5DPQj4L+Szks5Cvh8K9ekKyFkv1hGQtTtUTklnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXw9nB+26gnJLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9Cvhbn6gnJergxdPxbXxbSWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWcjXQ6G3Teh6eGfGQjoL+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+VrM1ROStRirJySzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTrofD4p9xr9YRkLS7VE5K1mKonJLOQz0I+C/ks5LOQz0I+C/l6KDz6H/AW160d2fb6BtUzB8w8fMwHAAAAAElFTkSuQmCC">
<br>
yellow
</label>
<input type="checkbox" id="blue" class="logo"/>
<label for="blue" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAAP99ff+MjP+bm/+rq/+4uP+2tv+pqf+Kiv+Bgf/Z2f90dP94eP/8/P/z8//k5P/Pz//IyP+ysv+Rkf+Vlf+goP+urv+kpP+Ojv/Q7Co7AAABmUlEQVR4nO3dS04DMRAG4e5kJm8eCUng/ieFBQvEhgip1apxfb7AX0tLlhxPzy+H1/N5nufLNE3b9be31U+7/Lf96k/X9QNu0wPu82+bQ1xi2Y4xdU8olgMUvndPKJax7p5QzEI+C/ks5LOQz0K+EQqv3ROKZay6JxSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5RijcdU8oll9n2Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQr6MffeEYiO8GFr+qy8L6Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5Av46N7QrER/pmxkM5CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkG+Ewlv3hGIZ2+4JxTKm7gnFLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTLuHdPKJax6Z5QLGPunlDMQj4L+Szks5DPQj4L+SzkG6Fw6TfgUxyOuWSn+RNFSAfbc4zH5wAAAABJRU5ErkJggg==">
<br>
blue
</label>
</div>
</form>
</body>

您可以直接使用style.setProperty(string, string)。第一个参数是CSS属性第二个参数是CSS值．它们都需要为strings才能工作。

let element = document.getElementById("element-id")
element.style.setProperty('color', '#ffffff');

要知道鼠标是否仍然悬停在元素上，可以在元素上创建一个事件侦听器。

element.addEventListener("mouseover", () => {
element.style.setProperty('color', '#ffffff');
});
element.addEventListener("mouseout", () => {
element.style.setProperty('color', '#000000');
});

我认为这个问题与你的css样式有关，因为当鼠标悬停在图片上时，你会在图片周围显示边框。请删除:hover

.logo:checked + .logo-label>img{
border: solid 2px red;
}

修改后的代码片段如下

function checkedtimes(checkboxes) {
return checkboxes
.map(checkbox => document.getElementById(checkbox).checked)
.reduce((x, y) => x + y)
}
let logos = ["green","yellow","blue"]
for (let logo of logos) {
logo = document.getElementById(logo)
logo.addEventListener('change', e=> {
e.preventDefault()
if (logo.checked) {
if (checkedtimes(logos)>2) {
logo.checked = false
}
}
else {

}
})
}

#logos {
display: flex;
justify-content: center;
}

.logo {
display: none;
}
.logo-label {
display: inline-block;
margin: 10px;
text-align: center;

}
.logo:checked + .logo-label>img{
border: solid 2px red;
}

<body>
<form id="form">

<div id="logos">
<input type="checkbox" id="green" class="logo" />
<label for="green" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAgAAAewB9vX2MxIybzJsAeQCr1Ku42rgAdwC527mBv4HZ7NkAcwB0uXR4unj8/vzz9/Pk8OTP5s/I4siy17KRx5GgzqCOxY6ezZ4n9oUoAAABg0lEQVR4nO3dS24CQQwA0Z4/zQx/BnL/k2aQyCLZBCEhKHe9E7jkrSWn3f4wHk+nPORzv2jv5uaX+mnr5l9z+4BL/4ghD3+M6TytFt2P6mN1T5k2qe9SZFVdQOElfGFbvXuIl7KQz0I+C/ks5LOQr4jCOXxhYyGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIV0RhbSGbhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8hVRuA5fGP9iyEI4C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5Cui8Bq+MP6fGQvhLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5iij8Cl/Yd+8e4qUs5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQz0I+C/ks5LOQbykcwhfm8IXxd2ghnIV8FvJZyGchn4V8FvLdCqcqstU2jZs6sm3+Bjn6EUWa4rsaAAAAAElFTkSuQmCC">
<br>
green
</label>
<input type="checkbox" id="yellow" class="logo"/>
<label for="yellow" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAQlBMVEX//wCHhwB4eABqagBcXABRUQBeXgB6egCDgwBaWgBUVAAqKgCMjAAICAAsLAAwMAA2NgA/PwBERABzcwBmZgBISABKZ9uGAAABoUlEQVR4nO3dS07DQBAG4Z74FSfmFYf7XxUWLAAhgZBarfLUdwDrr6U1I008PD49v9xu0zRd5nGchw/7cvpkaf92/vKhHyzLPvzB/X3db+Z1+u5yjTWObYu5ekKyFmP1hGQt7tUTkrUYqicks5DPQj4L+Szks5Cvh8K9ekKyFkv1hGQtTtUTklnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXwW8lnIZyGfhXw9nB+26gnJLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9Cvhbn6gnJergxdPxbXxbSWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWchnIZ+FfBbyWcjXQ6G3Teh6eGfGQjoL+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+VrM1ROStRirJySzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTrofD4p9xr9YRkLS7VE5K1mKonJLOQz0I+C/ks5LOQz0I+C/l6KDz6H/AW160d2fb6BtUzB8w8fMwHAAAAAElFTkSuQmCC">
<br>
yellow
</label>
<input type="checkbox" id="blue" class="logo"/>
<label for="blue" class="logo-label">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAAP99ff+MjP+bm/+rq/+4uP+2tv+pqf+Kiv+Bgf/Z2f90dP94eP/8/P/z8//k5P/Pz//IyP+ysv+Rkf+Vlf+goP+urv+kpP+Ojv/Q7Co7AAABmUlEQVR4nO3dS04DMRAG4e5kJm8eCUng/ieFBQvEhgip1apxfb7AX0tLlhxPzy+H1/N5nufLNE3b9be31U+7/Lf96k/X9QNu0wPu82+bQ1xi2Y4xdU8olgMUvndPKJax7p5QzEI+C/ks5LOQz0K+EQqv3ROKZay6JxSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5RijcdU8oll9n2Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQr6MffeEYiO8GFr+qy8L6Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5Av46N7QrER/pmxkM5CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkG+Ewlv3hGIZ2+4JxTKm7gnFLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTLuHdPKJax6Z5QLGPunlDMQj4L+Szks5DPQj4L+SzkG6Fw6TfgUxyOuWSn+RNFSAfbc4zH5wAAAABJRU5ErkJggg==">
<br>
blue
</label>
</div>
</form>
</body>

运行代码，检查它是否适合你

相关内容

最新更新

热门标签：