!important 不足以改变光标?
!important not enough to change cursor?
我正在制作我的作品集。每当用户将鼠标悬停在某个图块上时,我希望光标相应地改变。当用户将鼠标悬停在 ID 为 "crystalCollector" 的元素上时,它应该将光标更改为 "cursor2." 但是,这似乎只在图块的边框上起作用,无论 "crystalCollector" 是网格 space 或缩略图的 ID。在它后面加上 "!important" 也无济于事。
这是我页面的css:
body {
background-color: rgb(0, 158, 158);
}
.col-md-10 {
background-color: rgb(200, 200, 200);
border-radius: 25px;
}
/*h1 {background-color: grey;}*/
#crystalCollector:hover
{
cursor: url('images/cursor2.cur'), auto !important;
}
img{
/*width: 300px;*/
height: 300px;
margin: 20px;
border-radius: 25px;
}
p { margin-top: 20px; }
#me {
float: left;
}
.navbar
{
background-color: rgb(200, 200, 200);
border-color: grey;
border-radius: 10px;
}
.caption
{
position: relative;
background-color: rgb(0, 158, 158);
border-radius: 25px;
}
.thumbnail {
background-color: rgb(200, 200, 200);
border-color: grey;
border-radius: 25px;
}
这里是 html:
<!DOCTYPE html>
<html lang ="en-us">
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
#content {
display: none;
}
.thumbnail:hover {
border-style: solid;
border-width: 3px;
border-color:#E67F18;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body onload="showStuff()">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Dennis Markham</a>
</div>
<ul class="nav navbar-nav">
<li><a href="index.html">About Me</a></li>
<li class = "active"><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<!-- <div class ="container">
<section class ="row">
<div class ="col-md-1">
</div>
<div class="col-md-10">
<a href = "https://dennismarkham.github.io/trainTime/"> <img class = "portfolio" src = "images/dummy_image.png" alt ="train simulator"><span class = "caption">Train Timer </span></img></a>
<a href = "https://dennismarkham.github.io/week-4-game/"><img class = "portfolio" src = "images/dummy_image.png" alt ="crystal collector"></img></a>
<a href = "#"><img class = "portfolio" src = "images/dummy_image.png" alt ="coming soon..."></img></a>
</div>
<div class = "col-md-1">
</div>
</section>
</div> -->
<div id = "content">
<div class = "row">
<div class = "col-md-1">
</div>
<h1 style="padding: 5px; display: inline; border-radius:25px;">Solo Endeavors</h1>
<hr>
<br>
<br>
</div>
<div class="row">
<div class = "col-md-2"></div>
<div class="col-md-4" onmouseover ="crystal()">
<div class="thumbnail" id = "crystalCollector">
<a href="https://dennismarkham.github.io/week-4-game/">
<img style = "height: 250px" src="images/crystal.png" alt="Crystal" style="width:100%">
<div class="caption">
<p>Crystal Collector</p>
</div>
</a>
</div>
</div>
<div class="col-md-4" id = "trainTimer" onmouseover = "train()">
<div class="thumbnail">
<a href="https://dennismarkham.github.io/trainTime/">
<img style = "height: 250px" src="images/train2.png" alt="Train" style="width:100%">
<div class="caption">
<p>Train Timer</p>
</div>
</a>
</div>
</div>
<div class = "col-md-2"></div>
</div>
<div class="row">
<div class = "col-md-2"></div>
<div class="col-md-4" id = "bombDefuser" onmouseover="boom()">
<div class="thumbnail">
<a href="https://dennismarkham.github.io/BombDefuser/">
<img style = "height: 250px" src="images/bomb.png" alt="Bomb" style="width:100%">
<div class="caption">
<p>Bomb Defuser</p>
</div>
</a>
</div>
</div>
<div class="col-md-4" id = "weatherMonitor" onmouseover="thunder()">
<div class="thumbnail">
<a href="https://dennismarkham.github.io/AustinWeatherV2/">
<img style = "height: 250px" src="images/weather.png" alt="Train" style="width:100%">
<div class="caption">
<p>Austin Weather Monitor</p>
</div>
</a>
</div>
</div>
<div class = "col-md-2"></div>
</div>
<div class="row">
<div class = "col-md-2"></div>
<div class="col-md-4" id = "reactGallery" onmouseover="shutter()">
<div class="thumbnail" >
<a href="https://rphotogallery.herokuapp.com/">
<img style = "height: 250px" src="images/camera.png" alt="camera" style="width:100%">
<div class="caption">
<p>React Photo Gallery</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
</div>
<div class = "col-md-2"></div>
</div>
<div class = "row">
<div class = "col-md-1">
</div>
<h1 style="padding: 5px; display: inline; border-radius:25px;">Group Work</h1>
<hr>
<br>
<br>
</div>
<div class="row">
<div class = "col-md-2"></div>
<div class="col-md-4" id = "CC" onmouseover = "typing()">
<div class="thumbnail">
<a href="https://cacheualcorner.herokuapp.com/">
<img src="images/CC.png" alt="Cache-ual Corner (chat room)" style="width:100%">
<div class="caption">
<p>Cache-ual Corner</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
</div>
<div class = "col-md-2"></div>
</div>
</div>
<script>
//QUESTIONS:
//-Train sound and magic sound
var trainSound = new Audio("train.wav");
trainSound.volume = 0.1;
var crystalSound = new Audio("crystal.wav");
crystalSound.volume = 0.25;
var shutterSound = new Audio("shutter.wav");
shutterSound.volume = 0.2;
var thunderSound = new Audio("thunder.wav");
thunderSound.volume = 0.15;
var boomSound = new Audio("boom.mp3");
boomSound.volume = 0.15;
var typingSound = new Audio("typing.wav");
typingSound.volume = 0.15;
function showStuff() {
$("#content").fadeIn("slow");
}
function train(){
trainSound.play();
console.log("Playing train");
}
function crystal(){
crystalSound.play();
console.log("Playing crystal");
}
function shutter(){
shutterSound.play();
console.log("Playing shutter");
}
function thunder(){
thunderSound.play();
console.log("Playing thunder");
}
function boom(){
boomSound.play();
console.log("Playing boom");
}
function typing(){
typingSound.play();
console.log("playing typing");
}
</script>
</body>
</html>
对于任何 children,如果他们有一套 cursor
属性,那将适用,无论 parent 上为该 属性.
如果您想要比较两个规则的特异性(并且应用最强的规则),则它们都需要同时应用到同一元素。
例如:
parent {cursor: pointer !important}
child {cursor: not-allowed}
光标将在 <child>
上方 not-allowed
,即使它在 <parent>
内。
parent {
cursor: pointer !important;
}
child {
cursor: not-allowed;
}
child,
parent {
display: block
}
parent {
padding: 1rem;
border: 1px solid blue;
}
child {
min-height: 3rem;
border: 1px solid red;
}
<parent>
<child>child with <code>cursor:not-allowed</code></child>
</parent>
<child>child with <code>cursor:not-allowed</code></child>
要比较它们,您需要将两个选择器应用于同一元素:
parent, parent * {cursor: pointer !important;}
child {cursor: not-allowed;}
现在 <child>
放在 <parent>
里面会有 cursor:pointer
放在 <parent>
外面会有 cursor:not-allowed
.
parent,
parent * {
cursor: pointer !important;
}
child {
cursor: not-allowed;
}
child,
parent {
display: block
}
parent {
padding: 1rem;
border: 1px solid blue;
}
child {
min-height: 3rem;
border: 1px solid red;
}
code {
background-color: #f5f5f5;
padding: 2px;
}
<parent>
<child>child with <code>cursor:pointer</code><br>
(from: <code>parent > * {cursor:pointer !important}</code>)
</child>
</parent>
<child>child with <code>cursor:not-allowed</code></child>
旁注:不惜一切代价避免使用 !important
。稍后您可能需要覆盖它,这将是……困难的。
我正在制作我的作品集。每当用户将鼠标悬停在某个图块上时,我希望光标相应地改变。当用户将鼠标悬停在 ID 为 "crystalCollector" 的元素上时,它应该将光标更改为 "cursor2." 但是,这似乎只在图块的边框上起作用,无论 "crystalCollector" 是网格 space 或缩略图的 ID。在它后面加上 "!important" 也无济于事。
这是我页面的css:
body {
background-color: rgb(0, 158, 158);
}
.col-md-10 {
background-color: rgb(200, 200, 200);
border-radius: 25px;
}
/*h1 {background-color: grey;}*/
#crystalCollector:hover
{
cursor: url('images/cursor2.cur'), auto !important;
}
img{
/*width: 300px;*/
height: 300px;
margin: 20px;
border-radius: 25px;
}
p { margin-top: 20px; }
#me {
float: left;
}
.navbar
{
background-color: rgb(200, 200, 200);
border-color: grey;
border-radius: 10px;
}
.caption
{
position: relative;
background-color: rgb(0, 158, 158);
border-radius: 25px;
}
.thumbnail {
background-color: rgb(200, 200, 200);
border-color: grey;
border-radius: 25px;
}
这里是 html:
<!DOCTYPE html>
<html lang ="en-us">
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
#content {
display: none;
}
.thumbnail:hover {
border-style: solid;
border-width: 3px;
border-color:#E67F18;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body onload="showStuff()">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Dennis Markham</a>
</div>
<ul class="nav navbar-nav">
<li><a href="index.html">About Me</a></li>
<li class = "active"><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<!-- <div class ="container">
<section class ="row">
<div class ="col-md-1">
</div>
<div class="col-md-10">
<a href = "https://dennismarkham.github.io/trainTime/"> <img class = "portfolio" src = "images/dummy_image.png" alt ="train simulator"><span class = "caption">Train Timer </span></img></a>
<a href = "https://dennismarkham.github.io/week-4-game/"><img class = "portfolio" src = "images/dummy_image.png" alt ="crystal collector"></img></a>
<a href = "#"><img class = "portfolio" src = "images/dummy_image.png" alt ="coming soon..."></img></a>
</div>
<div class = "col-md-1">
</div>
</section>
</div> -->
<div id = "content">
<div class = "row">
<div class = "col-md-1">
</div>
<h1 style="padding: 5px; display: inline; border-radius:25px;">Solo Endeavors</h1>
<hr>
<br>
<br>
</div>
<div class="row">
<div class = "col-md-2"></div>
<div class="col-md-4" onmouseover ="crystal()">
<div class="thumbnail" id = "crystalCollector">
<a href="https://dennismarkham.github.io/week-4-game/">
<img style = "height: 250px" src="images/crystal.png" alt="Crystal" style="width:100%">
<div class="caption">
<p>Crystal Collector</p>
</div>
</a>
</div>
</div>
<div class="col-md-4" id = "trainTimer" onmouseover = "train()">
<div class="thumbnail">
<a href="https://dennismarkham.github.io/trainTime/">
<img style = "height: 250px" src="images/train2.png" alt="Train" style="width:100%">
<div class="caption">
<p>Train Timer</p>
</div>
</a>
</div>
</div>
<div class = "col-md-2"></div>
</div>
<div class="row">
<div class = "col-md-2"></div>
<div class="col-md-4" id = "bombDefuser" onmouseover="boom()">
<div class="thumbnail">
<a href="https://dennismarkham.github.io/BombDefuser/">
<img style = "height: 250px" src="images/bomb.png" alt="Bomb" style="width:100%">
<div class="caption">
<p>Bomb Defuser</p>
</div>
</a>
</div>
</div>
<div class="col-md-4" id = "weatherMonitor" onmouseover="thunder()">
<div class="thumbnail">
<a href="https://dennismarkham.github.io/AustinWeatherV2/">
<img style = "height: 250px" src="images/weather.png" alt="Train" style="width:100%">
<div class="caption">
<p>Austin Weather Monitor</p>
</div>
</a>
</div>
</div>
<div class = "col-md-2"></div>
</div>
<div class="row">
<div class = "col-md-2"></div>
<div class="col-md-4" id = "reactGallery" onmouseover="shutter()">
<div class="thumbnail" >
<a href="https://rphotogallery.herokuapp.com/">
<img style = "height: 250px" src="images/camera.png" alt="camera" style="width:100%">
<div class="caption">
<p>React Photo Gallery</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
</div>
<div class = "col-md-2"></div>
</div>
<div class = "row">
<div class = "col-md-1">
</div>
<h1 style="padding: 5px; display: inline; border-radius:25px;">Group Work</h1>
<hr>
<br>
<br>
</div>
<div class="row">
<div class = "col-md-2"></div>
<div class="col-md-4" id = "CC" onmouseover = "typing()">
<div class="thumbnail">
<a href="https://cacheualcorner.herokuapp.com/">
<img src="images/CC.png" alt="Cache-ual Corner (chat room)" style="width:100%">
<div class="caption">
<p>Cache-ual Corner</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
</div>
<div class = "col-md-2"></div>
</div>
</div>
<script>
//QUESTIONS:
//-Train sound and magic sound
var trainSound = new Audio("train.wav");
trainSound.volume = 0.1;
var crystalSound = new Audio("crystal.wav");
crystalSound.volume = 0.25;
var shutterSound = new Audio("shutter.wav");
shutterSound.volume = 0.2;
var thunderSound = new Audio("thunder.wav");
thunderSound.volume = 0.15;
var boomSound = new Audio("boom.mp3");
boomSound.volume = 0.15;
var typingSound = new Audio("typing.wav");
typingSound.volume = 0.15;
function showStuff() {
$("#content").fadeIn("slow");
}
function train(){
trainSound.play();
console.log("Playing train");
}
function crystal(){
crystalSound.play();
console.log("Playing crystal");
}
function shutter(){
shutterSound.play();
console.log("Playing shutter");
}
function thunder(){
thunderSound.play();
console.log("Playing thunder");
}
function boom(){
boomSound.play();
console.log("Playing boom");
}
function typing(){
typingSound.play();
console.log("playing typing");
}
</script>
</body>
</html>
对于任何 children,如果他们有一套 cursor
属性,那将适用,无论 parent 上为该 属性.
如果您想要比较两个规则的特异性(并且应用最强的规则),则它们都需要同时应用到同一元素。
例如:
parent {cursor: pointer !important}
child {cursor: not-allowed}
光标将在 <child>
上方 not-allowed
,即使它在 <parent>
内。
parent {
cursor: pointer !important;
}
child {
cursor: not-allowed;
}
child,
parent {
display: block
}
parent {
padding: 1rem;
border: 1px solid blue;
}
child {
min-height: 3rem;
border: 1px solid red;
}
<parent>
<child>child with <code>cursor:not-allowed</code></child>
</parent>
<child>child with <code>cursor:not-allowed</code></child>
要比较它们,您需要将两个选择器应用于同一元素:
parent, parent * {cursor: pointer !important;}
child {cursor: not-allowed;}
现在 <child>
放在 <parent>
里面会有 cursor:pointer
放在 <parent>
外面会有 cursor:not-allowed
.
parent,
parent * {
cursor: pointer !important;
}
child {
cursor: not-allowed;
}
child,
parent {
display: block
}
parent {
padding: 1rem;
border: 1px solid blue;
}
child {
min-height: 3rem;
border: 1px solid red;
}
code {
background-color: #f5f5f5;
padding: 2px;
}
<parent>
<child>child with <code>cursor:pointer</code><br>
(from: <code>parent > * {cursor:pointer !important}</code>)
</child>
</parent>
<child>child with <code>cursor:not-allowed</code></child>
旁注:不惜一切代价避免使用 !important
。稍后您可能需要覆盖它,这将是……困难的。