css怎么实现鼠标移入img变暗

Posted 2023-05-12

<style>
.bg
width:200px;
height:100px;
background:url(bottom_bg.jpg);

a
display: block;
width:100%;
height:100%;

a:hover
filter:alpha(opacity=80);
background:#000;
opacity:0.5;

</style>
<div class="bg"><a href="#"></a></div>
用css实现了。。。不过没有渐变效果，要做的话需要js追问

谢谢亲，我弄好了，谢了啊，哥们

参考技术A a
a:hover照这种模式设置一下css样式就可以了 参考技术B 先用PS做2个JPG图片，比如：原本的图片light.jpg和移上去变暗的图片dark.jpg

一。伪类:hover (ie6不支持)

.box background:url(../images/light.jpg);
.box:hover background:url(../images/dark.jpg);

ie6只能对a标签使用伪类。

.box a, .box a:link background:url(../images/light.jpg);
.box a:hover background:url(../images/dark.jpg);

二。使用jquery做图片切换动作

css部分：

.bg1background:url(../images/light.jpg);
.bg2background:url(../images/dark.jpg);

jquery部分：

$(function()
$('div').hover(function()
$(this).atter('class','bg2');

,function()
$(this).atter('class','bg1');
);
);

html部分：
<div class="bg1"></div>追问

谢谢亲，我弄好了，谢了啊，哥们

参考技术C 无法实现，只能在img上面覆盖层使其透明追问

额，不能把，不有那种透明嘛，我已经实现了，还是得谢谢你！

CSS之hover的使用和鼠标移入移出事件的区别addEventListenermouseentermouseleavequerySelectorsplit+~

文章目录

• 1、作用于自身
• 2、作用于子元素
• 3、作用于兄弟元素
• 4、使用JavaScript配合CSS实现样式修改
• 5、鼠标移入移出事件的区别

---

1、作用于自身

.oneself:hover 
	color: #0000ff;

---

<div class='oneself'>作用于自身</div>

---

2、作用于子元素

.child_element_box:hover>.child_element 
	color: #0000ff;

---

<div class="child_element_box">
	<div class="child_element">作用于子元素</div>
</div>

---

3、作用于兄弟元素

选择下一个紧挨的兄弟元素

.be_next_to_closely:hover+div 
	color: #0000ff;

---

<div>
	<div class="be_next_to_closely">选择紧挨的兄弟元素</div>
	<div>紧挨着的元素</div>
	<div>不是紧挨着的元素</div>
</div>

---

选择后边所有符合条件的兄弟元素

.all_element:hover~.elements 
	color: #0000ff;

---

<div>
	<div class="all_element">选择后边所有符合条件的兄弟元素</div>
	<div class="elements">符合的元素1</div>
	<div>不符合的元素1</div>
	<div class="elements">符合的元素2</div>
</div>

---

4、使用JavaScript配合CSS实现样式修改

.box 
	width: 100%;
	height: calc(100vh - 17px);
	background-image: url('./img/by01.jpg');


.tab_bar_box 
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);


.tab_bar_box>span 
	display: inline-block;
	width: 130px;
	border: 1px solid #777777;
	border-radius: 7px;
	padding: 7px;
	margin: 0;
	text-align: center;
	cursor: pointer;
	background-color: #eeeeee;
	opacity: .3;


.tab_bar_box>span:nth-child(2) 
	margin: 0 68px;


.tab_bar_1:hover,
.tab_bar_2:hover,
.tab_bar_3:hover 
	color: #0000ff;
	font-weight: 700;
	border: 1px solid #0000ff;
	opacity: .7;

---

<div class="box">
	<div class="tab_bar_box">
		<span class="tab_bar_1">标签1</span>
		<span class="tab_bar_2">标签2</span>
		<span class="tab_bar_3">标签3</span>
	</div>
</div>

---

(function () 
	let tabBar1 = document.querySelector('.tab_bar_1'),
		tabBar2 = document.querySelector('.tab_bar_2'),
		tabBar3 = document.querySelector('.tab_bar_3'),
		box = document.querySelector('.box');
	
	tabBar1.addEventListener("mouseenter", mouseenter, false);
	tabBar1.addEventListener("mouseleave", mouseleave, false);
	
	tabBar2.addEventListener("mouseenter", mouseenter, false);
	tabBar2.addEventListener("mouseleave", mouseleave, false);
	
	tabBar3.addEventListener("mouseenter", mouseenter, false);
	tabBar3.addEventListener("mouseleave", mouseleave, false);
	
	function mouseenter(e) 
		let indexArr = e.target.className.split('_'),
			i = indexArr[indexArr.length - 1],
			arr = ["url('./img/by07.jpg')", "url('./img/by09.jpg')", "url('./img/by12.jpg')"];
		
		box.style.backgroundImage = arr[i - 1];
		box.style.transitionDuration = '.7s';
	
	
	function mouseleave() 
		box.style.backgroundImage = `url('./img/by01.jpg')`;
		box.style.transitionDuration = '.7s';
	
)();

---

5、鼠标移入移出事件的区别

移入事件

mouseover：不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件。对应mouseout
mouseenter：只有在鼠标指针穿过被选元素时，才会触发mouseenter事件。对应mouseleave

---

鼠标移出事件

mouseout：不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件
mouseleave：只有在鼠标指针离开被选元素时，才会触发mouseleave事件