Question

我正在做我的投资组合。每当用户将鼠标悬停在某个图块上时，我都希望光标进行相应的更改。当用户将鼠标悬停在id为“ crystalCollector”的元素上时，应该将光标更改为“ cursor2”。但是，无论“ crystalCollector”是网格空间的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>

Answer 1

对于任何子代，如果他们具有一组cursor属性，那么无论父项对该属性设置的规则的特殊性如何，这都将适用。

如果要比较两个规则的特异性（并且要应用最强的规则），则它们都需要同时应用于同一元素。

例如：

parent {cursor: pointer !important}
child {cursor: not-allowed}

即使光标位于not-allowed内，光标也会位于<child>上<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。您稍后可能需要覆盖它，这将很困难。

重要不足以更改光标吗？

1 个答案: