I'm building a custom dropdown. The real thing is going to have all the necessary ARIA attributes of course, but here's the barebones version:
[...document.querySelectorAll('.select')].forEach(select => {
select.addEventListener('click', function() {
select.nextElementSibling.classList.toggle('visible');
});
});
.dropdown {
position: relative;
width: 16rem;
margin-bottom: 2rem;
}
.select {
display: flex;
align-items: center;
height: 2rem;
background-color: #ccc;
}
.popup {
display: none;
position: absolute;
left: 0;
right: 0;
height: 10rem;
background-color: #eee;
box-shadow: 0 0 0.5rem red;
}
.popup.visible {
display: block;
}
<!doctype html>
<html>
<body>
<div class="dropdown">
<div class="select">Button 1 ▼</div>
<div class="popup">Popup 1</div>
</div>
<div class="dropdown">
<div class="select">Button 2 ▼</div>
<div class="popup">Popup 2</div>
</div>
</body>
</html>
The obvious issue is that, when you open the first dropdown, popup 1 appears behind button 2. The obvious solution would be to give .popup a z-index, and make it an absurdly large value like 999 to make sure it appears above other elements on the page as well.
However, in my case, I would also like the popup to appear behind its corresponding button (in order to hide its box-shadow).
If I give the button a z-index greater than the popup's, the original problem returns: popup 1 appears behind button 2. If I instead give the z-index: 999 to the entire .dropdown and create a new stacking context, the same thing happens.
Is there any way I can meet my two requirements at the same time (popup behind its button, and only that one, but above everything else on the page)?
You could track the dropdown .open state. And use that to toggle the display property of its child .popup. However the .dropdown.open state will have a z-index:1, that way it will always show up on top of elements below it.
[...document.querySelectorAll('.select')].forEach(select => {
select.addEventListener('click', function(event) {
const {
target: {
parentElement: activeDropdown
}
} = event;
activeDropdown.classList.toggle('open');
const container = select.parentElement.parentElement;
const dropdowns = container.querySelectorAll('.dropdown');
Array.from(dropdowns).forEach(item => {
if (item !== activeDropdown) {
item.classList.remove('open')
}
})
});
});
.dropdown {
position: relative;
width: 16rem;
margin-bottom: 2rem;
}
.dropdown.open {
z-index: 1;
}
.dropdown.open>.popup {
display: block;
}
.select {
display: flex;
align-items: center;
height: 2rem;
background-color: #ccc;
}
.popup {
display: none;
position: absolute;
left: 0;
right: 0;
height: 10rem;
background-color: #fff;
box-shadow: 0 0 0.5rem red;
}
<!doctype html>
<html>
<body>
<div class="dropdown">
<div class="select">Button 1 ▼</div>
<div class="popup">Popup 1</div>
</div>
<div class="dropdown">
<div class="select">Button 2 ▼</div>
<div class="popup">Popup 2</div>
</div>
</body>
</html>
Related
I made a custom title bar application and then I gave it a file menu also.(electron)
Now I want to open a menu on click of this menu. I want a popup but the popup shouldn't be the standard windows popup for the menus , I want to make that custom too...but crating a new window can become very tedious if it takes too much time.
Most probably I want to instantiate a section , but I have no idea how to do it
The current situation
I have a window with a #container div having a #buttons div having 3 #minimize,#maximize,#close each with a span
The #buttons also has 2 divs .menu1 and .menu2 i want these menus to behave like normal menus in windows like the file and edit menu
<div id="container">
<nav>
<div id="buttons">
<div id="file">
<span class = "menu1">file</span>
</div>
<div id="about_us">
<span class = "menu2">about..us</span>
</div>
<div id="minimize" onclick="min()">
<span>-</span>
</div>
<div id="maximize" onclick="max()">
<span>+</span>
</div>
<div id="close" onclick="uff()">
<span>×</span>
</div>
</div>
</nav>
</div>
The result is
All the menus and buttons are clickable and have hover colors
Here you need to do something like this:
create the popup window in html and css. Use position: absolute; and z-index to get it to overlay the rest of the application.
Then hide the popup with a css class of for example .hidethat sets the popup to display: none;.
You now need a small piece of javascript to toggle that .hide class. Something like for example a function like this: const togglePopup = () => document.querySelector('.popup').classList.toggle('hide')
Trigger the togglePopup script with the click on one of your elements:
const trigger = document.querySelector('#idOrClassOfTriggerElement')
trigger.addEventListener('click', () => togglePopup()
Add a method for closing the popup with the same type of technique – adding an eventlistener to a trigger element (X icon for example) and calling the same toggle function as in #3.
Hope this was somehow what you wanted to achieve.
EDIT: Example code for a popup overlay:
const popup = document.querySelector('.popup')
const closeBtn = document.querySelector('.popup-close')
const openBtn = document.querySelector('.open')
const body = document.querySelector('body')
const showPopup = () => {
popup.classList.add('fade-in')
body.classList.add('scroll-stop')
}
const hidePopup = () => {
popup.classList.remove('fade-in')
popup.classList.add('fade-out')
body.classList.remove('scroll-stop')
setTimeout(() => {
popup.classList.remove('fade-out')
}, 500)
body.focus();
}
openBtn.addEventListener('click', showPopup)
closeBtn.addEventListener('click', hidePopup)
.popup {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fefefe;
z-index: 9;
opacity: 0;
pointer-events: none;
overflow: scroll;
}
.popup-inner {
width: 100%;
position: relative;
padding: 6% 16% 0;
}
.popup-close {
position: relative;
z-index: 10;
text-align: center;
color: #aaa;
font-size: 4rem;
cursor: pointer;
position: fixed;
right: 3%;
top: 3%;
}
.popup-close::before {
content: "\00d7";
}
.popup-close:hover::before {
color: #000;
transition: 0.6s all ease-in;
}
.open {
text-align: center;
cursor: pointer;
background: transparent;
padding: 1rem 2rem;
border: 2px solid;
border-radius: 6px;
color: #000;
font-weight: bold;
position: absolute;
top: 25%;
left: 44%;
}
.open:hover {
background: #ffffff18;
}
.fade-in {
opacity: 1;
pointer-events: unset;
transition: 0.3s all ease;
}
.fade-out {
opacity: 0;
pointer-events: none;
transition: 0.3s all ease;
}
.background {
height: 100vh;
width: 100vw;
background: olive;
margin: 0;
padding: 0;
}
<div class="background">
<button class="open">OPEN POPUP</a>
</div>
<!-- Add popup at the bottom of the html document, before </body> -->
<div class="popup" role="dialog" aria-label="Popup">
<div class="popup-close" role="button" arial-label="Close popup" tabindex="1"></div>
<div class="popup-inner">
<h2>This is a popup title</h3>
<p>Popup content...</p>
</div>
</div>
I've created a vertical navigation on the left of our site. We'd like the background color for a .item to change based on the subdirectory where a user is viewing content. So if someone clicks on a nav .item, the href will redirect them to a page and we want that .item to be highlighted a unique hex color that we can customize for each nav .item. All 6 nav items would have a different color.
One point of clarification is that sometimes folks may visit our site without having ever clicked a navigation item. I want the navigation items to still be highlighted based on the current subdirectory where a person is viewing content. This helps them easily identify where they are and how to get back if they navigate to other parts of the community. Also if a person does a global search and stumbles upon content in one of our 6 main areas, we want the nav menu to instantly identify their current location (based on url) and highlight that nav .item in our vertical nav bar.
Is Javascript or Jquery the way to go? Any help would be appreciated!!
Heres a FIDDLE with all the code.
sample CSS:
.navback {
position: fixed;
top: 0;
left: 0px;
width: 100px;
height: 100%;
background: #283237;
z-index: 4;
}
.navbar {
position: fixed;
top: 44px;
left: 0px;
width: 100px;
height: 60vh;
background: #283237;
display: flex;
z-index: 5;
flex-direction: column;
}
.topbar {
border-top: 1px solid #000;
top: 44px;
}
.navbar .item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
padding-top: 40px;
padding-bottom: 40px;
max-height: 100px;
z-index: 5;
}
.navbar .item div.label {
color: #fff;
position: relative;
top: 5px;
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Segoe UI", sans-serif;
transition: all 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
left: -100px;
}
Sample HTML:
<div class="topbar"></div>
<div class="navback leftnav">
<div class="navbar">
<div class="item hvr-shrink">
<a href="https://community.canopytax.com/">
<div>
<img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
<div class="label">Home</div>
</div>
</a>
</div>
<div class="item hvr-shrink">
<a href="https://community.canopytax.com/community-central/">
<div>
<img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
<div class="label">Central</div>
</div>
</a>
</div>
JS/jQuery
// get the first directory by splitting "/dir/path/name" into an array on '/'
// get [1] instead of [0] b/c the first should be blank. wrap in /s.
hereDir = "/" + window.location.pathname.split("/")[1] + "/";
// rebuild the URL since you're using absolute URLs (otherwise just use hereDir)
hereUrl = window.location.protocol + "//" + window.location.host + hereDir;
$(".item")
.find("[href^='" + hereUrl + "']")
.closest(".item").addClass("here");
Note .find("[href^=...]") selects things that start with what you're looking for.
CSS
/* now use .here to style */
.item.here {
background-color: purple;
}
.item.here .label {
font-weight: bold;
}
To answer your question directly, yes this could be done also via JavaScript/jQuery but there is a far simpler way using the css :active selector.
For example, if the user clicks the .item
then the code would be:
.item:active {
background-color: #cecece; // or whatever styling you want
}
Sidenote: As a webdesigner myself, in general i'd advise using the :hover selector when it comes to navbar highlightng instead of the :active one.
Use jquery in your html (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js)
Add the following script
$('.item').click(function(){
$('.item.active').removeClass("active");
$(this).addClass('active');
})
CSS
.item.active {
background-color: red;
}
Please see updated fiddle
If you are using jQuery you can loop through each anchor and test it against the current URL of the page like this:
$(function highlightCurrentUrl() {
var currentUrl = window.location.href;
var items = $(".item").each(function() {
var anchor = $(this).find('a');
$(this).removeClass('active');
//comparison logic
if (anchor.prop('href') == currentUrl) {
$(this).addClass("active");
}
});
});
What this does is add a class to the matching .item in the menu. (This won't work in JSFiddle due to Content Security policy so you will have to test it your own environment.)
Next, you will need to define the styles that will be applied to an .item.active DIV tag. And, if you want different colors for different items, you should probably give them ID's in you markup, so you can reference them individually:
<div class="item hvr-shrink" id="home-link">
<a href="https://community.canopytax.com/">
<div>
<img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
<div class="label">Home</div>
</div>
</a>
</div>
<div class="item hvr-shrink" id="central-link">
<a href="https://community.canopytax.com/community-central/">
<div>
<img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
<div class="label">Central</div>
</div>
</a>
</div>
These rules are saying that when the active class is added to the div with the ID home-link or central-link it should have the following properties
#home-link.active {
background-color: blue;
}
#central-link.active {
background-color: green;
}
Example of finished DPAD
body {
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
}
div#controller {
display: none;
}
div#instructions {
font-size: 20px;
color: white;
position: static;
text-align: center;
}
#media only screen and (max-width: 480px) {
div#instructions {
display: none;
}
div#controller {
display: flex;
position: relative;
background-color: grey;
opacity: 0.6;
height: 33%;
width: 80%;
}
div#controller.dpad {
width: 60%;
}
}
#media only screen and (max-width: 768px) {
div#instructions {
display: none;
}
div#controller {
display: flex;
position: relative;
top: 300px;
background-color: grey;
opacity: 0.6;
height: 50%;
width: 80%;
}
div#controller.dpad {
width: 33%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- The CSS is missing! Your mission is to re-create it -->
<link rel="stylesheet" href="env3d.css" />
<script src="http://css.operatoroverload.com/exercise/bundle.js"></script>
<script src="http://css.operatoroverload.com/exercise/game.js"></script>
<script type="text/javascript">
function playGame() {
console.log("playGame");
var game = new Game();
game.setup();
var env;
if (game.env) {
env = game.env;
} else {
env = new env3d.Env();
}
env.loop = game.loop.bind(game);
env.start();
}
window.addEventListener('load', function() {
playGame();
});
document.addEventListener("contextmenu", function(e) {
e.preventDefault();
});
</script>
</head>
<body>
<div id="controller">
<div class="dpad">
<button env3d-key="KEY_UP">UP</button>
<button env3d-key="KEY_LEFT">LEFT</button>
<button env3d-key="KEY_RIGHT">RIGHT</button>
<button env3d-key="KEY_DOWN">DOWN</button>
</div>
<button env3d-key="KEY_A">A</button>
<button env3d-key="KEY_Z">Z</button>
</div>
<div id="instructions">Use arrow keys to change camera angle, A to zoom in, Z to zoom out.</div>
<div id="env3d"></div>
</body>
</html>
I have this small little project to complete. However, I'm completely stuck on how to code the mobile controllers using only CSS. I cannot style it to look like the picture.
Can anyone please point me in the right direction of where to go?
Thanks! Your help will be greatly appreciated! :)
Dude, we're in the same web development class. 😂👌
Which part do you need help with?
First, you have to resize and position the #controller and .dpad divs at the bottom of the screen. You need to use the position, width, and height properties for this.
Then you have to position the buttons inside their container divs (also by using position, width, and height). You can select each button individually using the element>element, attribute=value, and/or :nth-child() selectors described here.
In case you need it, this page explains how to vertically center an element by giving it the properties position: relative (or absolute);, top: 50%;, and transform: translateY(-50%);. (Centering horizontally would be position: relative (or absolute);, left: 50%;, and transform: translateX(-50%);
Hope this helps you!
So i've come to live by these 3 CSS rules that almost always vertically center any block level element:
.vertically-center {
position: relative;
top: 50%;
transform: translateY( -50% );
}
It works often. But in the case of this particular layout I'm building it is pushing the elements too high ( partially off the screen ) and I don't know why.
This is how the webpage looks before adding my vertically-center class to my portrait-container div:
And this code snippet is how it appears after adding the vertically-center class to the portrait-container div:
.clearfix:after {
content: "";
display: block;
clear: both;
}
.vertically-center {
position: relative;
top: 50%;
transform: translateY( -50% );
}
body {
overflow: hidden;
}
main {
padding-top: 50px;
background: #fafafa;
text-align: left;
}
.portrait-container {
float: left;
}
img {
width: 150px;
border-radius: 50%;
}
.about-container {
width: 70%;
float: right;
}
<main class="clearfix">
<div class="portrait-container vertically-center">
<img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko">
</div>
<div class="about-container">
<h3>About</h3>
<p>
Hi, I'm John Lesko! This is my art portfolio where I share all
of my favorite work. When I'm not creating things, I enjoy excercising,
playing video games, drinking good Kool Aid, and more.
<br><br> If you'd like to follow me on Twitter, my username is
#jletsgo.
</p>
</div>
</main>
I just want the image container to be vertically-centered regardless of the height of it's parent. Help? Inspecting elements gave me no insights.
Edit: Just to show how this has always worked for me in the past. Here is a jsfiddle: https://jsfiddle.net/9kyjt8ze/4/. Why does it work for me there and not here?
Related question: What does top: 50%; actually do on relatively positioned elements?
Your CSS was not bad but I didn't get along with it. So here is another approach on how you could solve it, maybe it helps also. It will always center the image vertically and does not matter how much text the box on the right will have. The colored borders are just there to help show the visual effect of the box sizes.
* {
box-sizing: border-box;
}
.portrait-container {
position: relative;
margin: 20px 0;
}
.portrait-container:after {
content: '';
display: block;
clear: both;
}
.portrait-container img {
position: absolute;
top: calc(50% - 80px); /* 50% from top minus half img height*/
width: 150px;
height: 160px;
border-radius: 50%;
float: left;
}
.portrait-container {
border: solid 2px orange;
}
.portrait-container .about-container {
border: solid 2px green;
padding: 0 50px;
margin-left: 150px; /* this elements should be at least 150px away from left side */
width: calc(100% - 150px); /* the max width this element should have to be placed */
/* next to the image is the total width(100%) - the image width */
}
<main>
<div class="portrait-container">
<img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko">
<div class="about-container">
<h3>About</h3>
<p>
Hi, I'm John Lesko! This is my art portfolio where I share all
of my favorite work. When I'm not creating things, I enjoy excercising,
playing video games, drinking good fruit punch, and more.
<br><br> If you'd like to follow me on Twitter, my username is
#jletsgo.
</p>
</div>
</div>
</main>
<main>
<div class="portrait-container">
<img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko">
<div class="about-container">
<h3>About</h3>
<p>
Hi, I'm John Lesko! This is my art portfolio where I share all
of my favorite work. When I'm not creating things, I enjoy excercising,
playing video games, drinking good fruit punch, and more.
<br><br> If you'd like to follow me on Twitter, my username is
#jletsgo.
</p>
<p>
Hi, I'm John Lesko! This is my art portfolio where I share all
of my favorite work. When I'm not creating things, I enjoy excercising,
playing video games, drinking good fruit punch, and more.
<br><br> If you'd like to follow me on Twitter, my username is
#jletsgo.
</p>
</div>
</div>
</main>
UPDATE
Edit: Just to show how this has always worked for me in the past. Here is a jsfiddle: https://jsfiddle.net/9kyjt8ze/4/. Why does it work for me there and not here?
The black circle is the only element there in the Fiddle, there's no obstructions. In the code you are having trouble with, you have many elements either in the way or wrapped around other elements trapping them. Your ruleset will work if you start stripping away the layers. Or you can just add a property and change another property as per Snippet 1.
One important note a relative element is actually occupying the original spot, so if given a left:40px it appears to be moved 40px to the left, but in reality it still occupies the space 40px to the right of where it appears to be. So relative elements are not really in a flow different from static elements. Therefore they are affected by and affect static layout, it's just not noticeable normally because they stack with z-index.
Snippet 2 is an interactive demo, I figured maybe that'll help explain things better.
The 3 CSS ruleset is a common way to vertically align elements, but it was originally position: absolute instead of position:relative and it had to be in another positioned element if I remember correctly.
REFERENCE
Specific Ruleset
W3Schools
MDN
SOLUTION
.vertically-center {
/* Changed to absolute from relative */
position: absolute;
top: 50%;
transform: translateY( -50% );
}
main {
/* Added position: relative */
position: relative;
padding-top: 50px;
background: #fafafa;
text-align: left;
}
SNIPPET 1
.vertically-center {
position: relative;
top: 50%;
transform: translateY( -50%);
}
body {}
main {
padding-top: 50px;
overflow: scroll;
background: #fafafa;
text-align: left;
}
img {
width: 150px;
border-radius: 50%;
float: left;
}
.about {
width: calc(100% - 150px);
float: right;
}
<main class="clearfix">
<img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko" class="vertically-center">
<article class="vertically-center about">
<h3>About</h3>
<p>
Hi, I'm John Lesko! This is my art portfolio where I share all of my favorite work. When I'm not creating things, I enjoy excercising, playing video games, drinking good Kool Aid, and more.</p>
<p>If you'd like to follow me on Twitter, my username is
#jletsgo.
</p>
</article>
</main>
SNIPPET 2
$('#b1').click(function() {
$('body').toggleClass('R S');
});
$('#b2').click(function() {
$('#N1,#N2,#N3').toggleClass('N M');
});
$('input[id$="2"]').on('input', function() {
var grp = "." + $(this).attr('class');
var num = parseInt($(this).val(), 10);
grp !== '.S' ? $('section' + grp).css('left', num + '%') : $('section.S').css('margin-left', num + '%');
});
$('input[id$="3"]').on('input', function() {
var grp = "." + $(this).attr('class');
var num = parseInt($(this).val(), 10);
grp !== '.S' ? $('section' + grp).css('top', num + '%') : $('section.S').css('margin-top', num + '%');
});
html,
body {
height: 100%;
width: 100%;
}
body {
overflow: scroll;
font: 400 12px/1.2 Consolas;
}
section {
width: 50px;
height: 150px;
border: 2px dashed grey;
text-align: center;
color: white;
}
.R {
position: relative;
background: rgba(0, 0, 255, .3)
}
.A {
position: absolute;
background: rgba(255, 0, 0, .3)
}
.F {
position: fixed;
background: rgba(0, 255, 0, .3)
}
.S {
position: static;
background: rgba(122, 122, 0, .3)
}
.N {
position: absolute;
background: yellow;
color: blue;
}
.M {
position: relative;
background: black;
color: yellow;
}
#R1 {
left: 20%;
top: 3%;
z-index: 1;
}
#A1 {
left: 42%;
top: 44%;
z-index: 2;
}
#F1 {
right: 20%;
top: 44%;
z-index: 3;
}
#S1 {
margin-left: 0;
margin-top: -28%;
}
#N1 {
bottom: 0;
right: 0;
width: 25px;
height: 80px;
z-index: 4;
}
input {
width: 6ex;
position: static !important;
}
button {
font: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class='S'>
<fieldset>
<button id='b1'>Body Relative/Static</button>
<button id='b2'>Nested Absolute/Relative</button>
<br><br> RLeft
<input id='R2' class='R' type='number' value='20'> RTop
<input id='R3' class='R' type='number' value='3'> ALeft
<input id='A2' class='A' type='number' value='44'> ATop
<input id='A3' class='A' type='number' value='44'><br> FLeft
<input id='F2' class='F' type='number' value='64'> FTop
<input id='F3' class='F' type='number' value='44'> SLeft
<input id='S2' class='S' type='number' value='0'> STop
<input id='S3' class='S' type='number' value='-28'><br> NLeft
<input id='N2' class='N' type='number' value='45'> NTop
<input id='N3' class='N' type='number' value='45'>
</fieldset>
<section id='R1' class='R'>RELATIVE
<section id='N1' class='N'>N<br>E<br>S<br>T<br>E<br>D</section>
</section>
<section id='A1' class='A'><br><br><br>ABSOLUTE</section>
<section id='F1' class='F'><br><br>FIXED</section>
<section id='S1' class='S'><br><br><br><br><br>STATIC</section>
</body>
You can achieve this by using flexboxwith a lot less code. The below code will do the trick.
.clearfix {
display: flex;
align-items: center;
}
img {
width: 150px;
border-radius: 50%;
}
.about-container {
width: 70%;
padding-left: 30px;
}
Check it out in codepen http://codepen.io/anon/pen/OWYxrb
I am building a japanese learning site (and i am a total beginner with css and html etc.) with wordpress and want to add a kana-helper: Every time when the cursor hovers over a kana (basic japanese characters) in the text, the belonging romaji should be shown in a fixed div.
This is a simplified version of what i have so far (thx to the help of this community):
/*working, but only when in same parent*/
.ko:hover ~ .kanahelfer-ko {display: block;}
/*not working, because not same paren?*/
.re:hover ~ .kanahelfer-re {display: block;}
/*not working because ???*/
.ha:hover .kanahelfer-ha {display: block;}
/*how to get it working?*/
.kanahelfer-ko{
display: none;
position: fixed;
left: 28px;
top: 120px;
height: 160px;
width: 160px;
color: black;
}
.kanahelfer-re{
position: fixed;
left: 28px;
top: 120px;
display: none;
height: 160px;
width: 160px;
color: black;
}
.kanahelfer-ha{
position: fixed;
left: 28px;
top: 120px;
display: none;
height: 160px;
width: 160px;
color: black;
}
<span class="ko">こ</span><span class="re">れ</span><span class="ha">は</span>
<div class="kanahelfer-ko">
<div class="kana">ko</div>
</div>
<div>
<div class="kanahelfer-re">
<div class="kana">re</div>
</div>
</div>
<div class="kanahelfer-ha">
<div class="kana">ha/Partike wa</div>
</div>
Problem is, that there are over 200 different kana und the text with the japanese letters is in a table and so i would have to make over 200 entries per table cell (too much) if i will not find a working solution. Is there a selector or way to achieve this with css and html only, even when elements are not in the same parent? (If not, i would have to learn js -.-). I do not understand why .ha:hover .kanahelfer-ha {display: block;} does not work.
I've updated your snippet and add some JavaScript.
You need to link JQuery to make this code working.
You need to put all the JS code into ready event handler:
$(function() {
// JS code
});
$('.letters') – finding all elements with letters class.
this – current object (clicked in this particular case).
$(this).data('letter') – gets a value from data-letter attribute.
// Taking all ".letter" in ".letters" and bind an event handler to "hover" event
$('.letters .letter').hover(function () {
// Get a letter from hovered element
var letter = $(this).data('letter');
// Show just necessary element
$('.kanahelfer-' + letter).show();
}).
// Bind an event handler for "mouseleave" event
mouseleave(function() {
// Hide all ".kanahelfer" elements
$('.kanahelfer').hide();
});
.kanahelfer-ko{
display: none;
position: fixed;
left: 28px;
top: 120px;
height: 160px;
width: 160px;
color: black;
}
.kanahelfer-re{
position: fixed;
left: 28px;
top: 120px;
display: none;
height: 160px;
width: 160px;
color: black;
}
.kanahelfer-ha{
position: fixed;
left: 28px;
top: 120px;
display: none;
height: 160px;
width: 160px;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="kana-container">
<div class="letters">
<span class="letter" data-letter="ko">こ</span><span class="letter" data-letter="re">れ</span><span class="letter" data-letter="ha">は</span>
</div>
<div class="kanahelfer kanahelfer-ko">
<div class="kana">ko</div>
</div>
<div>
<div class="kanahelfer kanahelfer-re">
<div class="kana">re</div>
</div>
</div>
<div class="kanahelfer kanahelfer-ha">
<div class="kana">ha/Partike wa</div>
</div>
</div>