How do you show one anchor, when another anchor is hidden? (I tried to do a custom context menu. And if you hover over the datasafety tab, the lock icon should close, to do this you have to do two different anchors with an open and a closed lock, that is why i wondered, how to show a anchor if another is hidden aka. display:none)
window.addEventListener("contextmenu", function(event) {
event.preventDefault();
var contextElement = document.getElementById("context-menu");
contextElement.style.top = event.offsetY + "px";
contextElement.style.left = event.offsetX + "px";
contextElement.classList.add("active");
});
window.addEventListener("click", function() {
this.document.getElementById("context-menu").classList.remove("active")
});
#context-menu {
position: fixed;
z-index: 10000;
width: 150px;
background: #494949;
transform: scale(0);
transform-origin: top left;
margin-top: 50px;
margin-left: 2.5px;
}
#context-menu h1 {
font-size: 1.5rem;
margin: 0;
margin-left: 5px;
font-weight: 600;
}
#context-menu h1::before {
content: " ";
position: absolute;
left: 0;
bottom: 145px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 150px;
margin-top: 5px;
}
#context-menu.active {
transform: scale(1);
transition: transform 200ms ease-in-out;
}
#context-menu .item {
padding: 8px 10px;
font-size: 15px;
color: #eee;
}
.item-title {
padding: 8px 10px;
font-size: 15px;
color: #eee;
}
#item-datasafety-lock-open {
display: block;
}
#item-datasafety-lock-open:hover {
display: none;
}
#item-datasafety-lock-closed {
display: none;
}
#item-datasafety-lock-closed:hover {
display: block;
}
#context-menu .item:hover {
background: #555;
}
#context-menu .item a {
color: #ffffff;
text-decoration: none;
}
#context-menu .item i {
display: inline-block;
margin-right: 5px;
margin-left: 10px;
}
#context-menu hr {
margin: 2px;
border-color: #555;
}
<p>Right-click anywhere</p>
<div id="context-menu">
<div class="item-title" id="context-menu-title">
<i></i>
<h1>Schnellwahl:</h1>
</div>
<div class="item">
<i class="fa-solid fa-house"></i>Home
</div>
<div class="item">
<i class="fa-solid fa-address-book"></i>Kontakt
</div>
<div class="item">
<i class="fa-solid fa-link"></i>Links
</div>
<div class="item">
<a id="item-datasafety-lock-open" href="/datenschutz.html"><i class="fa-solid fa-lock-open"></i>Datenschutz</a>
<a id="item-datasafety-lock-closed" href="/datenschutz.html"><i class="fa-solid fa-lock"></i>Datenschutz</a>
</div>
</div>
Thank you for your help
This problem is already Solved, i made a
onmouseenter=scriptStart();
and with
onmouseleave=scriptStop();
or in the Code
<div class="item" id="context-menu-home" onmouseleave="contextMenuHome_notActive()" onmouseenter="contextMenuHome_active()">
<i class="fa-solid fa-house"></i>Home
</div>
and it worked!
So I'm currently working on a personal project. And came across with a problem.
I want my border color of this div to green when the user clicks the radio button inside that div. Like this:
Here
But my current version looks like this:
Here
Here is my CSS and HTML
.backProjectCard2 {
padding-right: 10px;
}
.backProjectCard {
border: 2px solid #ececec;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
/*For Input and .checkmark*/
.backProjectCard input {
position: relative;
height: 20px;
width: 20px;
left: 20px;
}
.input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.backProject input:checked~.checkmark {
background-color: #fff;
}
.checkmark {
position: absolute;
top: 27px;
left: 20px;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: solid #e0e0e0 1.7px;
z-index: -1;
}
.backProject input:checked~.checkmark:after {
display: block;
}
.backProject .checkmark:after {
top: 2px;
left: 3px;
width: 10px;
height: 10px;
border-radius: 50%;
background: hsl(176, 50%, 47%);
}
.checkmark:after {
z-index: 1;
content: "";
position: absolute;
display: none;
}
<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" class="input">
<span class="checkmark"></span>
<h4 id="card-h">Bamboo Stand</h4>
<h3>Pledge $25 or more</h3>
<p id="left">left</p>
<h2 id="card2-num">101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>
<hr>
<div class="pledgeSection">
<p>Enter your pledge</p>
<button class="btn-1 card2Btn">Continue</button>
<button class="btn-2">
<p>$</p>
<input value="25" class="input-price input-price2" type="number">
</button>
</div>
JS (Only for clicking the radio button twice):
function radioCheck() {
timesClicked++
if (timesClicked > 1) {
$("input").prop("checked", false)
timesClicked = 0;
}
}
function colorchange() {
var x = document.getElementById('checker');
var y = document.getElementById('radiobox');
if (x.checked === true) {
y.style.borderColor = "green";
} else {
y.style.borderColor = "silver";
}
}
#radiobox {
width: 300px;
height: 200px;
border: 5px solid;
border-color: silver;
}
<div id="radiobox">
<input type="radio" onclick="colorchange();" id="checker"></input>
</div>
To keep it simple, I'll just use a short example and you can just apply it to your own example.
This is how you can do that
function radioCheck(){
// Get the checkbox
var checkBox = document.getElementById("myInputCheck");
// Get the div with border
var divBorder = document.getElementsByClassName("backProjectCard")[0]
// If the checkbox is checked, display the border
if (checkBox.checked == true){
divBorder.classList.remove("backProjectCard"); //remove "backProjectCard"
divBorder.classList.add("newBorder"); //add the new border with new color
} else {
divBorder.classList.remove("newBorder");
divBorder.classList.add("backProjectCard");
}
}
.backProjectCard2 {
padding-right: 10px;
}
.backProjectCard {
border: 2px solid #ececec;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
/*For Input and .checkmark*/
.backProjectCard input {
position: relative;
height: 20px;
width: 20px;
left: 20px;
}
.input {
position: absolute;
opacity: 1;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 27px;
left: 20px;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: solid #e0e0e0 1.7px;
z-index: -1;
}
.newBorder{
border: 2px solid #177972 !important;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" id="myInputCheck">
<h4 >Bamboo Stand</h4>
<h3>Pledge $25 or more</h3>
<p >left</p>
<h2 >101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>
I have a problem that my delete button (the yellow one) works perfectly on preloaded book library items, but it isn't on the new entry when I add a book and want to delete it... I also want you to ask what it would be the easiest way to delete books also from myLibrary array... Thanks.
I've attached my code here. Any help will be appreciated. Thanks in advance.
//DOM
const bookForm = document.querySelector(".book-form");
// Calling a form when clicking on add book button
function openNav() {
document.getElementById("myNav").style.height = "100%";
console.log("dsafsa");
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
// where the books will be saved...
let myLibrary = [{
title: "Harry Potter - and the Philosopher's Stone",
author: "J. K. Rowling",
pages: 223,
readStatus: "no",
},
{
title: "The Hobbit",
author: "J.R.R. Tolkien",
pages: 304,
readStatus: "yes",
},
];
// book object
function Book(title, author, pages, readStatus) {
(this.title = title),
(this.author = author),
(this.pages = pages),
(this.readStatus = readStatus);
}
let i = "";
// render the book on page load...
function render() {
const books = myLibrary;
books.forEach((book) => {
addNewBookUI(book);
});
}
render();
document.querySelector(".book-form").addEventListener("submit", (e) => {
// prevent actual submit
e.preventDefault();
// get values
const title = document.querySelector("#title").value;
const author = document.querySelector("#author").value;
const pages = document.querySelector("#pages").value;
const readStatus = document.querySelector('input[name="yes_no"]:checked')
.value;
// prevent empty fields ...
if (title === "" || author === "" || pages === "0") {
alert("Missing data");
} else {
const book = new Book(title, author, pages, readStatus);
myLibrary.push(book);
addNewBookUI(book);
clearFormFields()
}
});
function addNewBookUI(book) {
if (book.readStatus === "yes") {
i = "checked";
} else {
i = "";
}
const main = document.querySelector(".main");
const bookCard = document.createElement("div");
bookCard.classList.add("book-card");
bookCard.innerHTML = `<div class="delete_button"><button class="delete btn"><i class="fa fa-trash">
</i></button></div><div class="title">${book.title}</div><div class="author">${book.author}
</div><div class="pages">${book.pages}</div><div class="read_status">Read: <input type="checkbox" id="yes" name="readstatus" value="yes" ${i}>
</div>`;
main.appendChild(bookCard);
}
// clear form fields after submit
function clearFormFields() {
const myForm = document.getElementById("myForm");
myForm.reset();
}
// Add event listener to all deleteButton
const deleteButton = document.querySelectorAll(".delete");
// deletes book UI;
deleteButton.forEach((el) => {
el.addEventListener("click", function () {
el.parentElement.parentElement.remove()
console.log("sas")
})
})
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
header {
color: #ffffff;
display: flex;
font-size: 1.4rem;
justify-content: space-between;
align-items: center;
background-color: #155999;
border-bottom: #172f4f solid 10px;
}
.logo {
margin-left: 10px;
}
header button {
background-color: #183153;
border: none;
text-align: left;
font-size: 0.9rem;
border-radius: 5px;
color: #ffffff;
padding: 10px 50px;
margin-right: 10px;
cursor: pointer;
}
.plus-sign {
padding-right: 7px;
}
.main {
position: absolute;
width: 100%;
height: 100%;
background-color: #183153;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.book-card {
text-align: center;
font-weight: 1000;
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 250px;
height: 350px;
border-radius: 10px;
background-color: #155999;
margin-left: 20px;
margin-top: 10px;
color: #ffffff;
border: #172f4f solid 8px;
line-height: 30px;
position: relative;
padding-left: 7px;
padding-right: 7px;
box-shadow: 10px 4px 22px -5px rgba(21, 89, 153, 1);
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(21, 89, 153);
background-color: rgba(21, 89, 153, 0.7);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
display: flex;
flex-direction: column;
font-size: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #ffffff;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #c3c6d1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay {
overflow-y: auto;
}
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.book-card div {
margin-top: 15px;
}
/* Style buttons */
.btn {
background-color: #ffd43b;
/* Blue background */
border: none;
/* Remove borders */
color: red;
/* White text */
padding: 12px 16px;
/* Some padding */
font-size: 16px;
/* Set a font size */
cursor: pointer;
/* Mouse pointer on hover */
border-radius: 50%;
position: absolute;
top: -20px;
right: -15px;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: #183153;
}
.delete_button {
top: 0;
right: 0;
}
form div {
margin-top: 15px;
font-family: 'Roboto', sans-serif;
color: white;
font-weight: bold;
font-size: 30px;
margin-bottom: 10px;
}
.radiobutton {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.form-flex {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.form-flex input {
width: 50%;
border-radius: 5px;
height: 30px;
margin-top: 5px
}
.form-flex input::placeholder {
text-align: center;
}
input[type=submit] {
background-color: #183153;
border: none;
text-align: left;
font-size: 0.9rem;
border-radius: 5px;
color: #ffffff;
padding: 10px 50px;
margin-top: -30px;
cursor: pointer;
}
.radiobutton p {
margin-top: 10px;
margin-bottom: 30px;
}
.flexbuttons {
display: flex;
margin-top: -50px;
margin-bottom: -25px;
}
input[type="text"] {
font-size: 24px;
text-align: center;
}
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
×
<!-- Overlay content -->
<div class="overlay-content">
<form id="myForm" class="book-form">
<div class="form-flex">
<label for="title">Book name:</label>
<input type="text" id="title" name="title" placeholder="Book name...">
</div>
<div class="form-flex">
<label for="author">Book author:</label>
<input type="text" id="author" name="author" placeholder="Book author...">
</div >
<div class="form-flex">
<label for="pages">Pages:</label>
<input type="number" id="pages" placeholder="0" name="pages">
</div>
<div class="radiobutton">
<p>Have you read a book?</p>
<div class="flexbuttons">
<div>
<p><input type="radio" id="huey" name="yes_no" value="yes" checked>
<label for="huey">yes</label>
</p>
</div>
<div>
<p><input type="radio" id="no" name="yes_no" value="no">
<label for="dewey">no</label>
</p>
</div>
</div>
</div>
<div><input type="submit" value="Add Book"></div>
</form>
</div>
</form>
</div>
</div>
</div>
<header>
<div class="logo">
<h1><i class="fa fa-book" aria-hidden="true"></i>
</i>Library
</h1>
</div>
<div class="button">
<button onclick="openNav()" class="add-book">
<i class="fa fa-plus plus-sign"></i>
Add book</button>
</div>
</header>
<div class="main">
</div>
<script src="./index.js" defer></script>
<script src="https://use.fontawesome.com/30a34909cc.js"></script>
You assigned the click event at loading time to all existing buttons with class=="delete". This will naturally not include the ones you might add dynamically at a later stage.
If you want all ".delete" buttons to have the click-event attached to them you need to do a "delegated event attachment" (edited, removes myLibrary element too now):
// Add event listener to all current and future deleteButtons
document.querySelector('.main').onclick=ev=>{
let el= ev.target.classList.contains('fa-trash')? ev.target.parentElement : ev.target.classList.contains('delete') ? ev.target : false;
if (el) {
let card=el.parentElement.parentElement; // book-card DOM element
// remove myLibrary array-element here:
myLibrary.splice( [...card.parentElement.children].indexOf(card) ,1);
console.log(myLibrary)
// remove card DOM element:
card.remove()
}
}
This will bind the click event handler to the .main div and will react only if the clicked element has a class=='fa-trash' or class=='delete'. In the first case it will "move up" one level (assign the parent element, i. e. the button to el), otherwise the clicked element is the button itself. If none of these classes are found, el becomes false and nothing happens. Otherwise the "Grandparent" of el is removed with `el.parentElement.parentElement.remove()' .
And please try and make your MCVE a little smaller next time, as it no fun to handle this amount of code in a small Stackoverflow snippet window! A true MCVE will get you more and faster responses!
Below is a working snippet, check it out:
//DOM
const bookForm = document.querySelector(".book-form");
// Calling a form when clicking on add book button
function openNav() {
document.getElementById("myNav").style.height = "100%";
console.log("dsafsa");
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
// where the books will be saved...
let myLibrary = [
{
title: "Harry Potter - and the Philosopher's Stone",
author: "J. K. Rowling",
pages: 223,
readStatus: "no",
},
{
title: "The Hobbit",
author: "J.R.R. Tolkien",
pages: 304,
readStatus: "yes",
},
];
// book object
function Book(title, author, pages, readStatus) {
(this.title = title),
(this.author = author),
(this.pages = pages),
(this.readStatus = readStatus);
}
let i = "";
// render the book on page load...
function render() {
const books = myLibrary;
books.forEach((book) => {
addNewBookUI(book);
});
}
render();
document.querySelector(".book-form").addEventListener("submit", (e) => {
// prevent actual submit
e.preventDefault();
// get values
const title = document.querySelector("#title").value;
const author = document.querySelector("#author").value;
const pages = document.querySelector("#pages").value;
const readStatus = document.querySelector('input[name="yes_no"]:checked')
.value;
// prevent empty fields ...
if (title === "" || author === "" || pages === "0") {
alert("Missing data");
} else {
const book = new Book(title, author, pages, readStatus);
myLibrary.push(book);
addNewBookUI(book);
clearFormFields()
}
});
function addNewBookUI(book) {
if (book.readStatus === "yes") {
i = "checked";
} else {
i = "";
}
const main = document.querySelector(".main");
const bookCard = document.createElement("div");
bookCard.classList.add("book-card");
bookCard.innerHTML = `<div class="delete_button"><button class="delete btn"><i class="fa fa-trash">
</i></button></div><div class="title">${book.title}</div><div class="author">${book.author}
</div><div class="pages">${book.pages}</div><div class="read_status">Read: <input type="checkbox" id="yes" name="readstatus" value="yes" ${i}>
</div>`;
main.appendChild(bookCard);
}
// clear form fields after submit
function clearFormFields() {
const myForm = document.getElementById("myForm");
myForm.reset();
}
// Add event listener to all deleteButton
document.querySelector('.main').onclick=ev=>{
let el= ev.target.classList.contains('fa-trash')? ev.target.parentElement : ev.target.classList.contains('delete') ? ev.target : false;
if (el) {
let card=el.parentElement.parentElement;
myLibrary.splice( [...card.parentElement.children].indexOf(card) ,1);
console.log(myLibrary)
card.remove()
}
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
header {
color: #ffffff;
display: flex;
font-size: 1.4rem;
justify-content: space-between;
align-items: center;
background-color:#155999;
border-bottom: #172f4f solid 10px;
}
.logo {
margin-left: 10px;
}
header button {
background-color: #183153;
border: none;
text-align: left;
font-size: 0.9rem;
border-radius: 5px;
color: #ffffff;
padding: 10px 50px;
margin-right: 10px;
cursor: pointer;
}
.plus-sign {
padding-right: 7px;
}
.main {
position: absolute;
width: 100%;
height: 100%;
background-color: #183153;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.book-card {
text-align: center;
font-weight: 1000;
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 250px;
height: 350px;
border-radius: 10px;
background-color: #155999;
margin-left: 20px;
margin-top:10px;
color: #ffffff;
border: #172f4f solid 8px;
line-height: 30px;
position: relative;
padding-left: 7px;
padding-right: 7px;
box-shadow: 10px 4px 22px -5px rgba(21,89,153,1);
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(21,89,153);
background-color: rgba(21,89,153,0.7);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
display: flex;
flex-direction: column;
font-size: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #ffffff;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #c3c6d1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.book-card div {
margin-top:15px;
}
/* Style buttons */
.btn {
background-color: #ffd43b; /* Blue background */
border: none; /* Remove borders */
color: red; /* White text */
padding: 12px 16px; /* Some padding */
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
border-radius: 50%;
position:absolute;
top:-20px;
right:-15px;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: #183153;
}
.delete_button {
top:0;
right:0;
}
form div {
margin-top: 15px;
font-family: 'Roboto', sans-serif;
color:white;
font-weight: bold;
font-size: 30px;
margin-bottom: 10px;
}
.radiobutton {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.form-flex {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.form-flex input {
width: 50%;
border-radius: 5px;
height: 30px;
margin-top: 5px
}
.form-flex input::placeholder {
text-align: center;
}
input[type=submit] {
background-color: #183153;
border: none;
text-align: left;
font-size: 0.9rem;
border-radius: 5px;
color: #ffffff;
padding: 10px 50px;
margin-top: -30px;
cursor: pointer;
}
.radiobutton p {
margin-top:10px;
margin-bottom: 30px;
}
.flexbuttons {
display: flex;
margin-top: -50px;
margin-bottom: -25px;
}
input[type="text"]
{
font-size:24px;
text-align: center;
}
JS:
//DOM
const bookForm = document.querySelector(".book-form");
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
×
<!-- Overlay content -->
<div class="overlay-content">
<form id="myForm" class="book-form">
<div class="form-flex">
<label for="title">Book name:</label>
<input type="text" id="title" name="title" placeholder="Book name...">
</div>
<div class="form-flex">
<label for="author">Book author:</label>
<input type="text" id="author" name="author" placeholder="Book author...">
</div >
<div class="form-flex">
<label for="pages">Pages:</label>
<input type="number" id="pages" placeholder="0" name="pages">
</div>
<div class="radiobutton">
<p>Have you read a book?</p>
<div class="flexbuttons">
<div><p><input type="radio" id="huey" name="yes_no" value="yes" checked>
<label for="huey">yes</label></p>
</div>
<div><p><input type="radio" id="no" name="yes_no" value="no">
<label for="dewey">no</label></p>
</div>
</div>
</div>
<div><input type="submit" value="Add Book"></div>
</form>
</div>
</form>
</div>
</div>
</div>
<header>
<div class="logo">
<h1><i class="fa fa-book" aria-hidden="true"></i>
</i>Library</h1>
</div>
<div class="button">
<button onclick="openNav()" class="add-book">
<i class="fa fa-plus plus-sign"></i>
Add book</button>
</div>
</header>
<div class="main">
</div>
<script src="./index.js" defer></script>
<script src="https://use.fontawesome.com/30a34909cc.js"></script>
I am trying to use :hover in css to show/hide the display of one of my divs when I hover over another div, but for some reason it's not working. I got it to work on other components but for some reason it's not working for this instance. Can't figure out what I did wrong. please let me know what I'm doing wrong so I can fix my mistake
JSX
render() {
return (
<div className='row'>
<div className='container-job' onClick={this.test}>
<div className='row'>
<div className='job-title'>
{this.props.jobs_info.title}
</div>
</div>
<div className='row wrapper'>
<div className='category-title'>Category</div>
<div className='location-title'>Location</div>
<div className='type-title'>Type of Job</div>
<div className='creator-title'>Job Creator</div>
</div>
<div className='row wrapper'>
<div className='category'>
{this.props.jobs_info.job_team.title}
</div>
<div className='location'>
{this.props.jobs_info.job_location.title}
</div>
<div className='type'>
{this.props.jobs_info.job_work_type.title}
</div>
<div className='creator'>
{this.props.jobs_info.user.name}
</div>
</div>
</div>
<div
className='counter-container'
id='counter-container'
onMouseEnter={this.changeBackground}
onMouseLeave={this.changeBackground2}
>
Candidates <br />
{this.props.jobs_info.candidates_count}
</div>
<div className='delete-container-job center'>
<ion-icon id='trash' name='trash'></ion-icon>
</div>
</div>
);
}
CSS
.jobs-card {
height: 100%;
width: 100%;
.container-job {
position: relative;
height: 100px;
width: 860px;
background-color: rgb(37, 45, 73);
border-radius: 10px;
margin-left: 30px;
margin-bottom: 20px;
}
.container-job:hover {
.delete-container-job {
display: block !important;
}
}
.job-title {
position: relative;
color: white;
font-size: 16px;
margin-left: 40px;
margin-top: 15px;
margin-bottom: 10px;
}
.row .wrapper {
margin-left: 25px;
}
.counter-container {
position: relative;
background-color: rgb(37, 45, 73);
border-radius: 10px;
width: 110px;
height: 100px;
margin-left: 20px;
text-align: center;
color: white;
font-size: 15px;
padding-top: 30px;
}
.delete-container-job {
position: relative;
background-image: linear-gradient(to right, #4639a7, #78019c);
height: 100px;
width: 50px;
right: 180px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
display: none;
}
#trash {
font-size: 22px;
color: white;
display: inline-block;
margin-top: 40px;
}
.center {
text-align: center;
}
You need to use general sibling combinator to apply a style on .delete-container-job when .container-job is hovered on.
.container-job:hover ~ .delete-container-job {
display: block !important;
}
Hello I'm attempting to to have two arrows pointing at a specific (x, y) point or in the general area of a button.
I would like two arrows coming from each of the boxs pointing in the general area of the button. I can do this fine with regular css on certain screens but when the screen is resized or smaller then the arrows no longer point to the button. I'm just trying to figure out a good way to handle this.
So really what I'm asking is what would be good way to go about having two arrows appended after 2 divs pointing at the same point. (The Red Square)
JSFIDDLE:
https://jsfiddle.net/kxw7jquu/
HTML
<div class='app-info-panel'>
<div class='app-info-panel-header'>
<h1>Data-sources</h1>
</div>
<div class='data-source-panel-wrapper' id='source_report'>
<h1>Report_File</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h3>Report Id</h3>
<h2>1</h2>
</div>
<div class='data-source-info'>
<h3>Report Name</h3>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h3>Date</h3>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h3>Reporter</h3>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow' style="transform: rotate(50deg); top: -10px">
➝
</div>
</div>
<div class='data-source-panel-wrapper' id='source_order'>
<h1>Order_movement</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h2>ID: 1</h2>
</div>
<div class='data-source-info'>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow' style="transform: rotate(130deg); bottom: -40px; left: 60px">
➝
</div>
</div>
<div>
<button class='data-source-button'>Order Filling</button>
</div>
</div>
CSS
.app-info-panel {
border-radius: 4px;
height: 30rem;
box-sizing: border-box;
padding: 20px;
position: relative;
width: 100%;
h1 {
font-size: 1.5rem;
font-weight: 500;
}
}
.data-source-panel-wrapper {
position: absolute;
user-select: none;
.source-arrow {
position: absolute;
left: calc(50% - 50px);
bottom: 20px;
font-size: 12.5rem;
color: #D6D7D8;
transform-origin: left;
z-index: 1;
}
h1 {
font-size: 1.4rem;
color: #0481E2;
text-align: center;
}
}
.data-source-panel {
position: relative;
display: flex;
box-sizing: border-box;
padding: 1rem;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
z-index: 2;
.data-source-info {
h3 {
color: #0481E2;
margin-top: 0;
margin-bottom: 3px;
font-size: .8rem;
line-height: normal;
}
h2 {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
}
}
#source_report {
.data-source-panel {
.data-source-info {
margin-right: 18px;
}
}
}
#source_order {
right: 60px;
.data-source-panel {
flex-direction: column;
.data-source-info {
margin: 5px 0;
}
}
}
.data-source-button {
display: block;
width: 220px;
height: 68px;
font-size: 1.25rem;
margin: 18.75rem auto 0;
color: white;
background-color: #FF9700;
}
I'm not really a math enthusiast, i managed to find a formula on the internet to do what you wanted.
Source Pen Instead of following the mouse i made it so it follows the button
PS: I removed the the html on the right for the sake of this explanation.
i know it's not a complete answer, but you can adjust it from here.
window.onresize = pointing;
function pointing() {
let point = document.querySelector('.data-source-button');
let rad = Math.atan2(point.offsetLeft, point.offsetTop);
let left = (rad * (20 / Math.PI) * -5) + 60;
document.querySelector('.leftArrow').style.transform = "rotate(" + left + "deg)"
}
pointing();
.app-info-panel {
border-radius: 4px;
height: 30rem;
box-sizing: border-box;
padding: 20px;
position: relative;
width: 100%;
}
.app-info-panel h1 {
font-size: 1.5rem;
font-weight: 500;
}
.data-source-panel-wrapper {
position: absolute;
user-select: none;
}
.data-source-panel-wrapper .source-arrow {
position: absolute;
left: calc(50% - 50px);
bottom: 20px;
font-size: 12.5rem;
color: #D6D7D8;
transform-origin: left;
z-index: 1;
}
.data-source-panel-wrapper h1 {
font-size: 1.4rem;
color: #0481E2;
text-align: center;
}
.data-source-panel {
position: relative;
display: flex;
box-sizing: border-box;
padding: 1rem;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
z-index: 2;
}
.data-source-panel .data-source-info h3 {
color: #0481E2;
margin-top: 0;
margin-bottom: 3px;
font-size: .8rem;
line-height: normal;
}
.data-source-panel .data-source-info h2 {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
#source_report .data-source-panel .data-source-info {
margin-right: 18px;
}
.data-source-button {
display: block;
width: 220px;
height: 68px;
font-size: 1.25rem;
margin: 18.75rem auto 0;
color: white;
background-color: #FF9700;
}
<div class='app-info-panel'>
<div class='app-info-panel-header'>
<h1>Data-sources</h1>
</div>
<div class='data-source-panel-wrapper' id='source_report'>
<h1>Report_File</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h3>Report Id</h3>
<h2>1</h2>
</div>
<div class='data-source-info'>
<h3>Report Name</h3>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h3>Date</h3>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h3>Reporter</h3>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow leftArrow' style=" top: -10px">
➝
</div>
</div>
<div>
<button class='data-source-button'>Order Filling</button>
</div>
</div>