I'm making my portfolio. Whenever the user hovers over a certain tile, I want the cursor to change accordingly. When the user hovers over the element with the id "crystalCollector", it's supposed to change the cursor to "cursor2." However, this only seems to work on the border of the tile, whether "crystalCollector" is the id of the grid space or the thumbnail. Putting "!important" after it does not help either.
Here is the css of my page:
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;
}
And here is the 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>
For any children, if they have a set cursor property, that's what's going to apply, regardless of specificity of rules set on parent for that property.
If you want the specificity of two rules to be compared (and the strongest one to apply), they both need to both apply to the same element.
For example:
parent {cursor: pointer !important}
child {cursor: not-allowed}
The cursor will be not-allowed over <child>, even if it's inside <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>To have them compared, you need to make both selectors apply to the same element:
parent, parent * {cursor: pointer !important;}
child {cursor: not-allowed;}
Now <child> placed inside <parent> will have cursor:pointer and when placed outside of <parent> will have 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>Side note: avoid using !important at all costs. You'll probably need to override it later and it will be... difficult.