个人中心
gpt4 book ai didi

Jquery .click 事件处理程序不适用于 CHROME 中的类选择器

转载 作者：太空宇宙 更新时间：2023-11-04 03:00:32 25 4
gpt4 key购买 nike

当发生 .click 事件时，当我尝试设置与鼠标悬停相同的不透明度时，它不起作用。

我尝试过的:-不同的选择器(li、menu:li、li:a、.li-navclass、nav-text)

帮助将不胜感激。提前致谢!

.container {
	position: absolute;
	background:url('../images/bgpic.png');
    background-repeat: no-repeat;
    background-size: cover;
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}

.wrapper {
	position: relative;
	margin: auto;
	padding: auto;
	height: 655px;
	width: 900px;
}

.titlehdr {
	margin: 0px;
	padding: 0px;	
	display: inline-block;
	width: 897px;
	height: 110px;
}

.title-div {
	display: inline-block;
	position: relative;
	height: 100%;
	width: 90px;

	margin: 0px;
	padding: 0px;
}


.title {
	position: relative;
	top: 40px;
	margin: 0px;
	padding: 0px;

	font-size: 70px;
	color: white;
	font-family: Mesquite Std;
	letter-spacing: 1.2px;

}

.barandgrill-div {
	display: inline-block;
	vertical-align: bottom;

}

.barandgrill-text {
	margin: 0px;
	padding: 0px;
	font-family: Arial;
	font-weight: bold;

}

/*---------------Nav Menu----------------*/
.menu {
	padding-left: 0px;
	margin-left: 0px;
	font-size: 15px;
}

.nav-container {
	text-align: center;
	display: block;
	top: 100px;
	margin: 0px;
	padding: 0px;
	width: 900px;
	height: 40px;
	background-color: #901423;
	border-style: solid;
	border-width: 1px;
	border-color: #111111;
}

.menu {
	display: inline-block;
	text-align: center;
	margin: auto;
	padding: auto;
 	list-style-type: none;
  	overflow: hidden;
    font-color: #000000;
}

.li-navclass {
 	 border-bottom: 1px solid #000;
}


li {
	display: inline-block;
	position: relative;
	padding: 0 1em;
	font-size: 150%;
}


.nav-text {
   	color: #ffffff;
  	font-weight: bold;
  	opacity: .3;
}


.nav-container ul a {
	text-decoration: none;
    word-spacing: 200px;
    margin: 0px;
    padding: 0px;
  	font-size: 20px;
  	font-family: Segoe Script;
}

/*---------------Content----------------*/

.content {
	display: block;
	width: 900px;
	height: 500px;
	border-style: solid;
	border-width: 1px;
	background-color: #111111;
	opacity: 0.6;
}

/*---------------Footer------------------*/

.foot {
	text-decoration: none;
	list-style-type: none;
	display: block;
	position: relative;
	text-align: center;
	font-size: 12px;
}

.ftr-button {
	position: relative;
	top: -5px;
	list-style: none;
	text-decoration: none;
	color: rgb(147, 104, 55);
}


.ftr-links {
	text-decoration: none;
	list-style-type: none;
}


.vert-line {
	height: 13px;
	border-right: 1px solid #909090;
}
<!DOCTYPE html>
<html lang="en">

<head>
	<title>Sticky Navigation Tutorial</title>                  
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	
	<link rel="stylesheet" media="screen, projection" href="css/screen.css"/>

</head>

<body>
	<div class="container">	
		
		<div class="wrapper">	


		<!--Title-->
					<div class="titlehdr">
						<div class="title-div">
							<p class="title">Donatelo's</p>
						</div>

						<div class="barandgrill-div">
							<p class="barandgrill-text">Mediterranean Bar and Grill</p>
						</div>
					</div>

		<!--Navigation Menu-->
					<div class="nav-container">
						<ul class="menu">
							<li class="li-navclass"><a href="index.html" class="nav-text">Story</a></li>
							<li class="li-navclass"><a href="menu.html" class="nav-text">Menu</a></li>
							<li class="li-navclass"><a href="gallery.html" class="nav-text">Gallery</a></li>
							<li class="li-navclass"><a href="catering.html" class="nav-text">Catering</a></li>
							<li class="li-navclass"><a href="contact.html" class="nav-text">Contact</a></li>
						</ul>		
					</div>

		<!--Grey Box-->
					<div class="content">
						<div id="sidebar">
							<div id="scroller">
							</div>
						</div>
					</div>

		<!--footer-->
					<div class="foot">
						<ul class="ftr-links">
							<li class="vert-line"><a href="index.html" class="ftr-button">Story</a></li>
							<li class="vert-line"><a href="menu.html" class="ftr-button">Menu</a></li>
							<li class="vert-line"><a href="gallery.html" class="ftr-button">Gallery</a></li>
							<li class="vert-line"><a href="catering.html" class="ftr-button">Catering</a></li>
							<li class="vert-line"><a href="contact.html" class="ftr-button">Contact</a></li>	
						</ul>
						<p class="copyright">Copyright © 2015 Agabi Mediterranean Restaurant</p>		
					</div>	
		</div>


</body>

<script>
$(document).ready(function(){
$(".nav-text").mouseover(function() {
  $( this ).css( "opacity", ".8" );
});

$(".nav-text").mouseout(function() {
	$(this).css( "opacity", ".2");
});

$(".ftr-button").mouseover(function() {
	$(this).css("color", "rgb(132, 131, 129)");
});
$(".ftr-button").mouseout(function() {
	$(this).css("color", "rgb(147, 104, 55)");
});

$(".nav-text").click(function() {
	$(this).css("opacity", ".8");
});
});
</script>

</html>

最佳答案

这是因为您的 .nav-text 位于 a 标签内。因此，您单击该链接并打开一个新页面。如果您不想在点击后打开新页面，则需要防止默认 a 标签。

做这样的事情——注意，你的链接将不再有效:

$(".nav-text").click(function(event) {
    event.preventDefault();
    $(this).css("opacity", ".8");
});

如果这不是您想要的，请查看 :focus in csshttp://www.w3schools.com/cssref/sel_focus.asp

关于Jquery .click 事件处理程序不适用于 CHROME 中的类选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31408947/

25 4 0
文章推荐： Javascript 菜单加粗选中，取消加粗其余部分
文章推荐： c - C 混淆中的结构
文章推荐： c - MPI_Gather 似乎不起作用
文章推荐： css - 小于 1920 x 1080 分辨率的 Bootstrap 响应缩放问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com