Question

将鼠标悬停在拐角处的每个圆上时，应更改主区域中的背景色，以使其与圆的颜色匹配，并同时显示足够的段落。

我尝试过过渡，不透明...但是无法正常工作。

请注意，HTML必须保持不变。

* {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  height: 100vh;
  text-align: center;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}

.bg {
  position: relative;
  height: 100vh;
  background-color: #333;
}

.circle {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  border: white solid 2px;
  z-index: 1;
}

.red.circle {
  position: absolute;
  top: 10%;
  left: 10%;
  background-color: red;
}

.green.circle {
  position: absolute;
  top: 10%;
  right: 10%;
  background-color: green;
}

.blue.circle {
  position: absolute;
  bottom: 10%;
  left: 10%;
  background-color: blue;
}

.orange.circle {
  position: absolute;
  bottom: 10%;
  right: 10%;
  background-color: orange;
}

p.red {
  display: none;
  background-color: red;
  line-height: 100vh;
}

p.green {
  display: none;
  background-color: green;
  line-height: 100vh;
}

p.blue {
  display: none;
  background-color: blue;
  line-height: 100vh;
}

p.orange {
  display: none;
  background-color: orange;
  line-height: 100vh;
}

<div class="red circle"></div>
<div class="green circle"></div>
<div class="blue circle"></div>
<div class="orange circle"></div>
<div class="bg">
  <p class="red">Czerwony</p>
  <p class="green">Zielony</p>
  <p class="blue">Niebieski</p>
  <p class="orange">Pomarańczowy</p>
</div>

Answer 1

由于它们在相同的层次结构中，您可以利用~通用同级selector，它仅在第二个元素之后（尽管不一定紧随其后）才与第二个元素匹配： / p>

/* added */

.red.circle:hover ~ .bg  {
  background-color: red;
}
.green.circle:hover ~ .bg {
  background-color: green;
}
.blue.circle:hover ~ .bg {
  background-color: blue;
}
.orange.circle:hover ~ .bg {
  background-color: orange;
}
.red.circle:hover ~ .bg p.red { display: block; }
.green.circle:hover ~ .bg p.green { display: block; }
.blue.circle:hover ~ .bg p.blue { display: block; }
.orange.circle:hover ~ .bg p.orange { display: block; }
/* end of edit */

* {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  height: 100vh;
  text-align: center;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}

.bg {
  position: relative;
  height: 100vh;
  background-color: #333;
  transition: background-color 0.5s ease-in;
}

.circle {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  border: white solid 2px;
  z-index: 1;
}

.red.circle {
  position: absolute;
  top: 10%;
  left: 10%;
  background-color: red;
}

.green.circle {
  position: absolute;
  top: 10%;
  right: 10%;
  background-color: green;
}

.blue.circle {
  position: absolute;
  bottom: 10%;
  left: 10%;
  background-color: blue;
}

.orange.circle {
  position: absolute;
  bottom: 10%;
  right: 10%;
  background-color: orange;
}
p {
  transition: background-color 1s ease-in;
}
p.red {
  display: none;
  background-color: red;
  line-height: 100vh;
}

p.green {
  display: none;
  background-color: green;
  line-height: 100vh;
}

p.blue {
  display: none;
  background-color: blue;
  line-height: 100vh;
}

p.orange {
  display: none;
  background-color: orange;
  line-height: 100vh;
}

<div class="red circle"></div>
<div class="green circle"></div>
<div class="blue circle"></div>
<div class="orange circle"></div>
<div class="bg">
  <p class="red">Czerwony</p>
  <p class="green">Zielony</p>
  <p class="blue">Niebieski</p>
  <p class="orange">Pomarańczowy</p>
</div>

您可以在.bg类上添加过渡效果，以达到所需的效果。

Answer 2

我将简化您的代码以依赖伪元素和数据属性来获取背景和内容。这样，由于不需要任何复杂的选择器，控制起来会更加容易：

body {
  margin: 0;
  background: #333;
  min-height: 100vh;
}

.circle {
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  border: white solid 2px;
}

.circle::before {
  content: attr(data-text);
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  color: white;
  line-height: 100vh;
  font-size: 80px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  background: inherit;
  opacity: 0;
  transition: 1s;
}

.circle:hover::before {
  opacity: 1;
}

.circle.red {
  top: 10%;
  left: 10%;
  background: red;
}

.circle.green {
  top: 10%;
  right: 10%;
  background: green;
}

.circle.blue {
  bottom: 10%;
  left: 10%;
  background: blue;
}

.circle.orange {
  bottom: 10%;
  right: 10%;
  background: orange;
}

<div class="circle red" data-text="Czerwony"></div>
<div class="circle green" data-text="Zielony"></div>
<div class="circle blue" data-text="Niebieski"></div>
<div class="circle orange" data-text="Pomarańczowy"></div>

Answer 3

@soulshined的仅css解决方案非常棒，但是以防万一有人要使用javascript-这是一个提示：

const express = require("express");
const router = express.Router();

const Pusher = require("pusher");

var pusher = new Pusher({
  appId: "xxxxxx",
  key: "xxxxxxxxxxxxxxxxxx",
  secret: "xxxxxxxxxxxxxxx",
  cluster: "ap1",
  encrypted: true
});

router.post("/", (req, res) => {
  const newVote = {
    id: req.body.id,
    points: 1
  };

  pusher.trigger("scan", "scan-player", {
    id: req.body.id,
    player_id: req.body.player_id,
    admin_id: req.body.admin_id
  });

  return res.json({
    success: true,
    message: "Scan successful!",
    id: req.body.id
   });
});

module.exports = router;

根据不同的悬停元素更改背景

3 个答案: