Я нашел ответы на эту проблему на этом сайте и применил предложенные методы, но я действительно не вижу, что мне не хватает. Есть ли что-то в большей части кода, что мешает мне заставить это работать, или я просто слепой? Это потому, что у меня уже есть еще одно действие для парения более <a>?
Соответствующий код:
.box2{
display:none;
}
a{
border-bottom:1px dotted;
}
a:hover{
border-bottom:1px solid;
}
.topics:hover + .box2{
display:flex;
}
<p>... interested in a <a class="topics">wide array of topics</a> ... </p>
<div class="box2">A list of topics</div>
https://codepen.io/brxtn/pen/KKKKzXy
<!---GRAIN JAVA START--->
var viewWidth,
viewHeight,
canvas = document.getElementById("canvas"),
ctx;
// change these settings
var patternSize = 64,
patternScaleX = 1,
patternScaleY = 1,
patternRefreshInterval = 4,
patternAlpha = 25; // int between 0 and 255,
var patternPixelDataLength = patternSize * patternSize * 4,
patternCanvas,
patternCtx,
patternData,
frame = 0;
window.onload = function() {
initCanvas();
initGrain();
requestAnimationFrame(loop);
};
// create a canvas which will render the grain
function initCanvas() {
viewWidth = canvas.width = canvas.clientWidth;
viewHeight = canvas.height = canvas.clientHeight;
ctx = canvas.getContext('2d');
ctx.scale(patternScaleX, patternScaleY);
}
// create a canvas which will be used as a pattern
function initGrain() {
patternCanvas = document.createElement('canvas');
patternCanvas.width = patternSize;
patternCanvas.height = patternSize;
patternCtx = patternCanvas.getContext('2d');
patternData = patternCtx.createImageData(patternSize, patternSize);
}
// put a random shade of gray into every pixel of the pattern
function update() {
var value;
for (var i = 0; i < patternPixelDataLength; i += 4) {
value = (Math.random() * 255) | 0;
patternData.data[i] = value;
patternData.data[i + 1] = value;
patternData.data[i + 2] = value;
patternData.data[i + 3] = patternAlpha;
}
patternCtx.putImageData(patternData, 0, 0);
}
// fill the canvas using the pattern
function draw() {
ctx.clearRect(0, 0, viewWidth, viewHeight);
ctx.fillStyle = ctx.createPattern(patternCanvas, 'repeat');
ctx.fillRect(0, 0, viewWidth, viewHeight);
}
function loop() {
if (++frame % patternRefreshInterval === 0) {
update();
draw();
}
requestAnimationFrame(loop);
}
<!---GRAIN JAVA END--->
<!---LEAF JAVA START--->
let leaf = false;
const leaf_animation = () => {
if (!leaf) {
document.querySelector(".scale-in-hor-left").style.display = "block";
leaf = true;
} else {
document.querySelector(".scale-in-hor-left").style.display = "none";
leaf = false;
}
}
document.querySelector("#menuleaf").addEventListener("click", leaf_animation);
<!---LEAF JAVA END--->
body {
background-size: 70px 70px;
background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);
font-family: Quicksand;
}
#canvas {
position: absolute;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 80%;
}
h1 {
font-family: Quicksand;
font-weight: normal;
font-color: grey;
position: relative;
}
p {
font-color: grey;
font-size: 11pt;
margin: 0px;
}
.box1 {
display: flex;
flex-direction: column;
position: static;
float: left;
color: black;
border: 1px;
border-style: solid;
border-color: grey;
width: 399px;
height: 280px;
margin-left: 62px;
margin-top: 62px;
padding-left: 20px;
background: white;
}
.box2 {
display: none;
flex-direction: column;
position: static;
float: left;
color: black;
font-size: 9pt;
text-align: justify;
border: 1px;
border-style: solid;
border-color: grey;
width: 331px;
height: 121px;
margin-left: 69px;
margin-top: 132px;
padding: 9px;
background: white;
}
.topics:hover+.box2 {
display: flex;
}
#menuleaf {
cursor: help;
}
#menuleaf:hover,
#menuleaf:focus {
margin-left: 2.5px;
}
menu {
width: 200px;
position: absolute;
bottom: 0px;
left: 0px;
}
ul {
list-style-type: none;
line-height: 10px;
padding: 0px;
}
li {
float: left;
padding: 5px;
}
a {
position: relative;
border-bottom: 1px dotted;
text-decoration: none;
color: black;
font-size: 10pt;
}
a:hover {
border-bottom: 1px solid;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Quicksand|Raleway|Titillium+Web&display=swap" rel="stylesheet">
</head>
<body>
<canvas id="canvas"></canvas>
<div class="box1">
<h1>Brixton Sandhals
<img id="menuleaf" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/microsoft/209/seedling_1f331.png" height="15px"></h1>
<p><em>"Up here my eyes are green leaves, unseeing."</em></p>
<br>
<p>Hello! I am a born and raised Canadian living, working, writing, and musing about a <a class="topics">wide array of topics</a> in Shiga, Japan.</p>
<div class=menu>
<ul>
<li>?<a href="/quarantine.html">quarantine</a></li>
<li><a href="http://are.na/brixton-sandhals/">are.na</a></li>
<li><a href="twitter.com/brixton">twitter</a></li>
<li><a href="instagram.com/ydalir">insta</a></li>
<li><a href="special.fish/brixton">special.fish</a></li>
</ul>
</div>
</div>
<!---endbox-->
<div class=box2>✨poetry, bodybuiling, canadian literature, japanese literature, language learning, using linguistics to learn languages, translation as collaboration, techniques for learning chinese, korean, and japanese in tandem, psychoanalysis, religion, the anthropology
and pyschology of religion, scandinavia, astrology, theopoetics, aesthetics, somaesthetics, hermeneutics, the kyoto school, design, the history of the web, the complex plane, and set theory.
</div>
</body>
</html>