css实现 当鼠标移到input的时候，input框出现阴影，当移动到button的时候，input框的阴影消失，button框出现阴影...

可以使用CSS中的:hover伪类和box-shadow属性来实现该效果。具体实现如下：

<input type="text" class="input" />
<button class="button">按钮</button>

.input:hover {
  box-shadow: 0 0 5px #ccc; /* 鼠标移到input时出现阴影 */
}

.button:hover + .input {
  box-shadow: none; /* 鼠标移到button时input的阴影消失 */
}

.button:hover {
  box-shadow: 0 0 5px #ccc; /* 鼠标移到button时出现阴影 */
}

这里使用了相邻兄弟选择器（+）来选中按钮后面的输入框，从而实现当鼠标移到按钮时，输入框的阴影消失，按钮的阴影出现。

相关问题

jquery实现 当鼠标移到input的时候，input框出现阴影，当移动到button的时候，input框的阴影消失，button框出现阴影...

可以使用jQuery的事件绑定和CSS方法来实现这个效果。具体实现步骤如下：

1. 给input和button分别添加一个父元素，例如div。
2. 使用jQuery的mouseenter事件和CSS方法，当鼠标移到input时，设置input的父元素的box-shadow属性为阴影效果。
3. 使用jQuery的mouseleave事件和CSS方法，当鼠标移出input时，将input的父元素的box-shadow属性设置为none，即取消阴影效果。
4. 使用jQuery的mouseenter事件和CSS方法，当鼠标移到button时，设置button的父元素的box-shadow属性为阴影效果。
5. 使用jQuery的mouseleave事件和CSS方法，当鼠标移出button时，将button的父元素的box-shadow属性设置为none，即取消阴影效果。

示例代码如下：

<div class="input-container">
  <input type="text">
</div>
<div class="button-container">
  <button>Button</button>
</div>

$(function() {
  // 鼠标移到input时设置阴影效果
  $(".input-container").mouseenter(function() {
    $(this).css("box-shadow", "0 0 5px #ccc");
  });
  
  // 鼠标移出input时取消阴影效果
  $(".input-container").mouseleave(function() {
    $(this).css("box-shadow", "none");
  });
  
  // 鼠标移到button时设置阴影效果
  $(".button-container").mouseenter(function() {
    $(this).css("box-shadow", "0 0 5px #ccc");
  });
  
  // 鼠标移出button时取消阴影效果
  $(".button-container").mouseleave(function() {
    $(this).css("box-shadow", "none");
  });
});

通过以上代码，当鼠标移到input时，input框出现阴影，移动到button时，input框的阴影消失，button框出现阴影。

给input框加一个鼠标点击变换颜色并清除value值的css代码

您可以使用CSS中的`:focus` 伪类来实现鼠标点击input框时变换颜色的效果，并使用JavaScript来清除input框的value值。以下是一个示例代码：

<input type="text" id="myInput">

input:focus {
  outline: none; /* 取消默认的外边框样式 */
  border-color: #7c7cff; /* 修改输入框边框颜色 */
  box-shadow: 0 0 5px #7c7cff; /* 添加阴影效果 */
}

/* 隐藏清除按钮 */
input::-ms-clear,
input::-ms-reveal {
  display: none;
}

input::-webkit-clear-button {
  display: none;
}

const myInput = document.getElementById("myInput");

myInput.addEventListener("focus", function() {
  this.style.borderColor = "#7c7cff";
  this.style.boxShadow = "0 0 5px #7c7cff";
  this.value = "";
});

当用户点击input框时，输入框将失去默认的外边框样式，并将边框颜色和阴影效果修改为您所设定的颜色。同时，JavaScript代码将清除input框中的value值。另外，CSS代码中的`::-ms-clear`和`::-webkit-clear-button`选择器用于隐藏默认的清除按钮。您可以根据需要修改颜色和阴影效果的数值，以及输入框的id属性值。