0
Lorsque j'essaie de définir la même opacité que le survol de la souris lorsqu'un événement .click se produit, cela ne fonctionne pas.Le gestionnaire d'événements Jquery .click ne fonctionne pas pour le sélecteur de classes dans CHROME
Ce que j'ai essayé: sélecteurs -Différents (li, menu: li, li: a, .li-navclass, nav-texte)
aide serait grandement appréciée. Merci d'avance!
.container {
\t position: absolute;
\t background:url('../images/bgpic.png');
background-repeat: no-repeat;
background-size: cover;
\t margin: 0px;
\t padding: 0px;
\t height: 100%;
\t width: 100%;
}
.wrapper {
\t position: relative;
\t margin: auto;
\t padding: auto;
\t height: 655px;
\t width: 900px;
}
.titlehdr {
\t margin: 0px;
\t padding: 0px; \t
\t display: inline-block;
\t width: 897px;
\t height: 110px;
}
.title-div {
\t display: inline-block;
\t position: relative;
\t height: 100%;
\t width: 90px;
\t margin: 0px;
\t padding: 0px;
}
.title {
\t position: relative;
\t top: 40px;
\t margin: 0px;
\t padding: 0px;
\t font-size: 70px;
\t color: white;
\t font-family: Mesquite Std;
\t letter-spacing: 1.2px;
}
.barandgrill-div {
\t display: inline-block;
\t vertical-align: bottom;
}
.barandgrill-text {
\t margin: 0px;
\t padding: 0px;
\t font-family: Arial;
\t font-weight: bold;
}
/*---------------Nav Menu----------------*/
.menu {
\t padding-left: 0px;
\t margin-left: 0px;
\t font-size: 15px;
}
.nav-container {
\t text-align: center;
\t display: block;
\t top: 100px;
\t margin: 0px;
\t padding: 0px;
\t width: 900px;
\t height: 40px;
\t background-color: #901423;
\t border-style: solid;
\t border-width: 1px;
\t border-color: #111111;
}
.menu {
\t display: inline-block;
\t text-align: center;
\t margin: auto;
\t padding: auto;
\t list-style-type: none;
\t overflow: hidden;
font-color: #000000;
}
.li-navclass {
\t border-bottom: 1px solid #000;
}
li {
\t display: inline-block;
\t position: relative;
\t padding: 0 1em;
\t font-size: 150%;
}
.nav-text {
\t color: #ffffff;
\t font-weight: bold;
\t opacity: .3;
}
.nav-container ul a {
\t text-decoration: none;
word-spacing: 200px;
margin: 0px;
padding: 0px;
\t font-size: 20px;
\t font-family: Segoe Script;
}
/*---------------Content----------------*/
.content {
\t display: block;
\t width: 900px;
\t height: 500px;
\t border-style: solid;
\t border-width: 1px;
\t background-color: #111111;
\t opacity: 0.6;
}
/*---------------Footer------------------*/
.foot {
\t text-decoration: none;
\t list-style-type: none;
\t display: block;
\t position: relative;
\t text-align: center;
\t font-size: 12px;
}
.ftr-button {
\t position: relative;
\t top: -5px;
\t list-style: none;
\t text-decoration: none;
\t color: rgb(147, 104, 55);
}
.ftr-links {
\t text-decoration: none;
\t list-style-type: none;
}
.vert-line {
\t height: 13px;
\t border-right: 1px solid #909090;
}<!DOCTYPE html>
<html lang="en">
<head>
\t <title>Sticky Navigation Tutorial</title>
\t <meta charset="utf-8" />
\t <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
\t
\t <link rel="stylesheet" media="screen, projection" href="css/screen.css"/>
</head>
<body>
\t <div class="container"> \t
\t \t
\t \t <div class="wrapper"> \t
\t \t <!--Title-->
\t \t \t \t \t <div class="titlehdr">
\t \t \t \t \t \t <div class="title-div">
\t \t \t \t \t \t \t <p class="title">Donatelo's</p>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="barandgrill-div">
\t \t \t \t \t \t \t <p class="barandgrill-text">Mediterranean Bar and Grill</p>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t <!--Navigation Menu-->
\t \t \t \t \t <div class="nav-container">
\t \t \t \t \t \t <ul class="menu">
\t \t \t \t \t \t \t <li class="li-navclass"><a href="index.html" class="nav-text">Story</a></li>
\t \t \t \t \t \t \t <li class="li-navclass"><a href="menu.html" class="nav-text">Menu</a></li>
\t \t \t \t \t \t \t <li class="li-navclass"><a href="gallery.html" class="nav-text">Gallery</a></li>
\t \t \t \t \t \t \t <li class="li-navclass"><a href="catering.html" class="nav-text">Catering</a></li>
\t \t \t \t \t \t \t <li class="li-navclass"><a href="contact.html" class="nav-text">Contact</a></li>
\t \t \t \t \t \t </ul> \t \t
\t \t \t \t \t </div>
\t \t <!--Grey Box-->
\t \t \t \t \t <div class="content">
\t \t \t \t \t \t <div id="sidebar">
\t \t \t \t \t \t \t <div id="scroller">
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t <!--footer-->
\t \t \t \t \t <div class="foot">
\t \t \t \t \t \t <ul class="ftr-links">
\t \t \t \t \t \t \t <li class="vert-line"><a href="index.html" class="ftr-button">Story</a></li>
\t \t \t \t \t \t \t <li class="vert-line"><a href="menu.html" class="ftr-button">Menu</a></li>
\t \t \t \t \t \t \t <li class="vert-line"><a href="gallery.html" class="ftr-button">Gallery</a></li>
\t \t \t \t \t \t \t <li class="vert-line"><a href="catering.html" class="ftr-button">Catering</a></li>
\t \t \t \t \t \t \t <li class="vert-line"><a href="contact.html" class="ftr-button">Contact</a></li> \t
\t \t \t \t \t \t </ul>
\t \t \t \t \t \t <p class="copyright">Copyright © 2015 Agabi Mediterranean Restaurant</p> \t \t
\t \t \t \t \t </div> \t
\t \t </div>
</body>
<script>
$(document).ready(function(){
$(".nav-text").mouseover(function() {
$(this).css("opacity", ".8");
});
$(".nav-text").mouseout(function() {
\t $(this).css("opacity", ".2");
});
$(".ftr-button").mouseover(function() {
\t $(this).css("color", "rgb(132, 131, 129)");
});
$(".ftr-button").mouseout(function() {
\t $(this).css("color", "rgb(147, 104, 55)");
});
$(".nav-text").click(function() {
\t $(this).css("opacity", ".8");
});
});
</script>
</html>
Je veux juste faire en sorte que lorsque je clique, le texte sur lequel je clique reste surligné. – Paul
Dans ce cas, vous pouvez utiliser sauvagement ce code –