I've found answers to the problem on this site and have implemented the techniques suggested, but I really cannot see what I am missing. Is there something in the larger setup of the code that is preventing me from getting this to work or am I just blind? Is it because I already have another action taking place for hovers over <a>?
Relevant code is
.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>
