I am trying to build a function with jquery but I can't. I am trying to control video and audio with one button set for the different tabs. the problem is that the play pause button only controls the audio file not the video file in the second tab.
when we go to the second tab and press the button below it plays the same audio file.
see the sample code here
$(document).ready(function () {
$("#audio_play").on("click", function () {
$("#audio").get(0).play();
})
$("#audio_pause").on("click", function () {
$("#audio").get(0).pause();
})
$('.menu ul li:nth(1)').on("click", function () {
$("#audio_play").attr('id', 'video_play');
$("#audio_pause").attr('id', 'video_pause');
})
$("#video_play").on("click", function () {
$("#video").get(0).play();
})
$("#video_pause").on("click", function () {
$("#video").get(0).pause();
})
})
.con{
text-align:center;
width:156px;
margin:0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.2/alpine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex justify-center items-center w-full h-screen inset-x-0 mx-auto">
<!--actual component start-->
<div class="menu" x-data="setup()">
<ul class="flex justify-center items-center my-4">
<template x-for="(tab, index) in tabs" :key="index">
<li class="cursor-pointer py-2 px-4 text-gray-500 border-b-8"
:class="activeTab===index ? 'text-green-500 border-green-500' : ''" #click="activeTab = index"
x-text="tab"></li>
</template>
</ul>
<div class="w-full bg-white p-16 text-center mx-auto border">
<div x-show="activeTab===0">
<h1>Audio Player</h1>
<audio id="audio"
src="https://res.cloudinary.com/foxyplays989/video/upload/v1558369838/LetsGo.mp3"></audio>
</div>
<div x-show="activeTab===1">
<iframe id="video" class="w-full h-56"
src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>
<div x-show="activeTab===2">Content 3</div>
<div x-show="activeTab===3">Content 4</div>
</div>
</div>
<!--actual component end-->
</div>
<div class="flex con">
<button class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-blue-700 rounded shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none" id="audio_play">play</button>
<button class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-red-500 rounded shadow ripple hover:shadow-lg hover:bg-red-600 focus:outline-none" id="audio_pause">Pause</button>
</div>
<script>
function setup() {
return {
activeTab: 0,
tabs: [
"Tab No.1",
"Tab No.2",
]
};
};
</script>
Related
Im trying to edit innerHTML of a specific dynamically added DIV using e.target but it returns Null
//im adding e.listener to a whole DIV and targetting specific elements inside that div
todoList.addEventListener("click", (e)=>{
let inputText = e.target.closest("span")
console.log(inputText.innerHTML)
})
<ul class="flex todo-list flex-col todo-list h-72 flex-1 overflow-auto">
<li class="todo flex justify-between bg-white/30 p-2 px-2 rounded-r-full my-1">
<div class="">
<span class="input-text">Hello World</span>
</div>
<div class="flex gap-x-1">
<button class="done-todo-btn bg-[#E94560] font-bold px-2 rounded-xl">Done</button>
<button class="edit-todo-btn bg-[#16003B] font-bold px-2 rounded-xl">Edit</button>
<button class="del-todo-btn bg-[#0F3460] font-bold px-2 rounded-xl">Delete</button>
</div>
</li>
</ul>
//im adding e.listener to a whole DIV and targetting specific elements inside that div
todoList.addEventListener("click", (e)=>{
//added querySelector
let inputText = e.target.closest(".todo").querySelector(".input-text")
console.log(inputText.innerHTML)
})
<ul class="flex todo-list flex-col todo-list h-72 flex-1 overflow-auto">
<li class="todo flex justify-between bg-white/30 p-2 px-2 rounded-r-full my-1">
<div class="">
<span class="input-text">Hello World</span>
</div>
<div class="flex gap-x-1">
<button class="done-todo-btn bg-[#E94560] font-bold px-2 rounded-xl">Done</button>
<button class="edit-todo-btn bg-[#16003B] font-bold px-2 rounded-xl">Edit</button>
<button class="del-todo-btn bg-[#0F3460] font-bold px-2 rounded-xl">Delete</button>
</div>
</li>
</ul>
I want to ask. I have a layout, there is a button when i click the button, a pop up will appear, the problem is when the modal appears, there are some components that are not dimmed, such as the button and the navbar as shown in the picture, I use vue cli and tailwind and for the modal I use flowbite. I've been looking for a way but still can't find it. Can anyone help me?
My website currently has a mobile-based display
this the web without modal
and this is the web when the button is clicked
here is the code in navbarWhite.vue
<template>
<header class="sticky h-14 top-0 z-50 bg-white" :class="boxShadow">
<div class="flex flex-row">
<div class="absolute" v-if="srcPictureLeft">
<img
#click="onClickBack"
class="ml-7 py-4 cursor-pointer text-black"
:src="require(`../assets/icon/${srcPictureLeft}`)"
/>
</div>
<div v-else></div>
<div class="py-4 relative mx-auto font-semibold text-black text-xl">
{{ title }}
</div>
</div>
</header>
</template>
<style>
</style>
<script>
export default {
name: "NavbarWhite",
props: {
onClickBack: {
type: Function,
},
title: String,
srcPictureLeft: String,
boxShadow: String,
},
};
</script>
and this is the button component (ButtonBottom.vue)
<template>
<div
class="
sticky
w-full
absolute
mb-0
bottom-0
z-50
bg-white
h-16
drop-shadow-[0_0_4px_rgba(0,0,0,0.25)]
"
>
<div class="mx-[30px] py-2">
<button-primary
class="
bg-green-button
text-white
hover:bg-green-button-darker hover:rounded-[32px]
"
>
<slot>Button</slot>
</button-primary>
</div>
</div>
</template>
<script>
import ButtonPrimary from "#/components/ButtonPrimary.vue";
export default {
name: "ButtonBottom",
components: {
ButtonPrimary,
},
};
</script>
and this is the parent where all the component called
<template>
<div class="h-screen relative">
<div class="h-[94%]">
<navbar-white
boxShadow="shadow-[0_0_10px_0_rgba(0,0,0,0.25)]"
srcPictureLeft="backIconBlack.svg"
:onClickBack="goBack"
title="Ringkasan Transaksi"
/>
<div class="mt-10 mx-[30px]">
<div class="flex flex-row justify-between mb-7">
<div class="font-semibold">No. Rekening</div>
<div>12345678</div>
</div>
<div class="flex flex-row justify-between mb-7">
<div class="font-semibold">Nama Penerima</div>
<div>Lorem Ipsum</div>
</div>
<div class="flex flex-row justify-between mb-4">
<div class="font-semibold">Bank Tujuan</div>
<div>12345678</div>
</div>
<hr class="mb-4" />
<div class="flex flex-row justify-between mb-7">
<div class="font-semibold">Nominal</div>
<div>Rp 200.000</div>
</div>
<div class="flex flex-row justify-between mb-4">
<div class="font-semibold">Fee</div>
<div>Rp 2.500</div>
</div>
<div class="flex flex-row justify-between">
<div class="font-semibold">Total</div>
<div class="font-semibold">Rp 202.500</div>
</div>
</div>
</div>
<button-bottom data-modal-toggle="biayaAdmin">Selanjutnya</button-bottom>
<!-- modal start here -->
<div
id="biayaAdmin"
tabindex="-1"
class="
hidden
overflow-y-auto overflow-x-hidden
fixed
top-0
right-0
left-0
z-50
w-full
md:inset-0
h-modal
md:h-full
"
>
<div class="relative p-4 w-full max-w-md h-full md:h-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div
class="
flex
justify-between
items-center
p-5
rounded-t
border-b
dark:border-gray-600
"
>
<h3 class="text-xl font-medium text-gray-900 dark:text-white">
Small modal
</h3>
<button
type="button"
class="
text-gray-400
bg-transparent
hover:bg-gray-200 hover:text-gray-900
rounded-lg
text-sm
p-1.5
ml-auto
inline-flex
items-center
dark:hover:bg-gray-600 dark:hover:text-white
"
data-modal-toggle="biayaAdmin"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<p
class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
>
With less than a month to go before the European Union enacts new
consumer privacy laws for its citizens, companies around the world
are updating their terms of service agreements to comply.
</p>
<p
class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
>
The European Union’s General Data Protection Regulation (G.D.P.R.)
goes into effect on May 25 and is meant to ensure a common set of
data rights in the European Union. It requires organizations to
notify users as soon as possible of high-risk data breaches that
could personally affect them.
</p>
</div>
<!-- Modal footer -->
<div
class="
flex
items-center
p-6
space-x-2
rounded-b
border-t border-gray-200
dark:border-gray-600
"
>
<button
data-modal-toggle="biayaAdmin"
type="button"
class="
text-white
bg-blue-700
hover:bg-blue-800
focus:ring-4 focus:outline-none focus:ring-blue-300
font-medium
rounded-lg
text-sm
px-5
py-2.5
text-center
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
"
>
I accept
</button>
<button
data-modal-toggle="biayaAdmin"
type="button"
class="
text-gray-500
bg-white
hover:bg-gray-100
focus:ring-4 focus:outline-none focus:ring-gray-200
rounded-lg
border border-gray-200
text-sm
font-medium
px-5
py-2.5
hover:text-gray-900
focus:z-10
dark:bg-gray-700
dark:text-gray-300
dark:border-gray-500
dark:hover:text-white
dark:hover:bg-gray-600
dark:focus:ring-gray-600
"
>
Decline
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ButtonBottom from "#/components/ButtonBottom.vue";
import NavbarWhite from "#/components/NavbarWhite.vue";
export default {
name: "TransactionSummary",
components: {
ButtonBottom,
NavbarWhite,
},
methods: {
goBack() {
this.$router.go(-1);
},
},
};
</script>
The css z-index of your header and footer might be higher than the z-index of the overlay mask.
Try inspecting the elements and evaluate their z-index values, try forcing new values to ensure that the z-index of the header and footer is a lower value than the grey overlay mask.
The issue might be the lack of a z-index value on some of those elements to indicate which should appear over the top of another.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
I am attempting to convert a Bootstrap Jquery Modal with an ajax request into a Tailwind Css Alpine JS modal with Ajax request.
Jquery Code
$(document).on('click', 'a[data-ajax-popup="true"], button[data-ajax-popup="true"], div[data-ajax-popup="true"]', function () {
var title = $(this).data('title');
var size = ($(this).data('size') == '') ? 'md' : $(this).data('size');
var url = $(this).data('url');
$("#commonModal .modal-title").html(title);
$("#commonModal .modal-dialog").addClass('modal-' + size);
$.ajax({
url: url,
success: function (data) {
$('#commonModal .modal-body').html(data);
$("#commonModal").modal('show');
daterange_set();
taskCheckbox();
common_bind("#commonModal");
commonLoader();
},
error: function (data) {
data = data.responseJSON;
show_toastr('Error', data.error, 'error')
}
});
});
The Jquery Modal Template located in the layouts.app
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div>
<h4 class="h4 font-weight-400 float-left modal-title" id="exampleModalLabel"></h4>
{{__('Close')}}
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
The code to call the modal from a different blade view i.e. names.index.blade.php
<div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-6">
<a href="#" data-url="{{ route('names.create') }}"
data-ajax-popup="true"
data-title="{{__('Create Name')}}"
class="btn btn-xs btn-white btn-icon-only width-auto">
<i class="fas fa-plus"></i> {{__('Create')}}
</a>
</div>
This is doing an ajax call to the NamesController which contains the code
public function create()
{
if(Auth::user()->can('create name'))
{
return view('names.create');
}
else
{
return response()->json(['error' => __('Permission Denied.')], 401);
}
}
I have been able to code the AlpineJs modal. However unable to wrap my head around calling the ajax functionality.
The modal code with Alpine and Tailwind
<div x-data="{ 'showModal': false }" x-cloak #keydown.escape="showModal = false">
<!-- Trigger for Modal -->
<button type="button" #click="showModal = true">Open Modal</button>
<div x-show="showModal" class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50">
<!-- begin::Modal content -->
<div class="sm:h-[calc(100%-5rem)] max-w-4xl my-6 mx-auto relative w-auto pointer-events-none">
<div #click.away="showModal = false"
x-transition:enter="motion-safe:ease-out duration-300"
x-transition:enter-start="opacity-0 scale-90"
x-transition:enter-end="opacity-100 scale-100"
class="max-h-full overflow-hidden relative flex flex-col w-full pointer-events-auto
bg-white bg-clip-padding rounded-md
border-none shadow-lg">
<!-- begin::Modal Header -->
<div class="flex flex-shrink-0 items-center justify-between p-4
bg-blue-200
border-b border-gray-200 rounded-t-md">
<h3 class="font-semibold text-base sm:text-xl
text-gray-50">
Modal title
</h3>
<button type="button"
#click="showModal = false"
class="text-gray-200 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="default-modal">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- end::Modal Header -->
<!-- begin::Modal Body -->
<div class="flex-auto overflow-y-auto relative p-4
dark:bg-modal-body-dark">
<p>This is some placeholder content.</p>
</div>
<!-- end::Modal Body -->
<!-- begin::Modal Footer -->
<div
class="flex flex-shrink-0 flex-wrap space-x-2 items-center justify-end p-4
bg-gray-200
border-t border-gray-200 rounded-b-md">
<button data-modal-toggle="default-modal" type="button"
class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600">
Cancel
</button>
<button data-modal-toggle="default-modal" type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
I accept
</button>
</div>
<!-- end::Modal Footer -->
</div>
</div>
<!-- end::Modal content -->
</div>
</div>
How do I get the same Jquery functionality with the AlpineJs modal template located in the layouts.app and doing an ajax call from names.index.blade.php
As my title already says, I have an issue with a modal not opening on all buttons.
Here is the situation:
I have a page that displays all applications a user has sent for different jobs. So it may be just one, or up to whatever.
It looks like this:
Now if the user wants to cancel the application he can press the button "Bewerbung zurückziehen", then the modal opens to give a heads up that all data will be lost and if he is sure, in the modal he can confirm it or go back. Everything works fine for the first post on the site, but for all other posts just nothing happens, so the modal doesn't open.
Here is my code:
The blade file that displays all posts:
#foreach($bewerbungen as $bewerbung)
#foreach($stellenanzeigen_names as $stellenanzeigen_name)
#if($bewerbung->Stellenanzeigen_ID === $stellenanzeigen_name->Stellenanzeigen_ID)
<div
class="p-10 grid-cols-3 grid-rows-3 gap-4 shadow-2xl mb-10 bg-gradient-to-r from-green-400 to-blue-500 border-solid border-2 border-black rounded-lg">
<!--Card 1-->
<div
class="overflow-hidden row-span-3 bg-gray-100 shadow-2xl border-solid border-2 border-gray-500 rounded-lg">
<div class="pt-4 pl-4">
{{ $stellenanzeigen_name->Titel }}
<hr class="border-black">
</div>
<div class="pt-4 pl-8 font-medium text-xl font-bold font-serif">
ID der Bewerbung: {{ $bewerbung->Bewerbung_ID }}</div>
<div class="pt-4 pl-8 pb-3 font-medium text-xl font-bold font-serif">
ID der Stellenanzeige: {{ $bewerbung->Stellenanzeigen_ID }}</div>
<div class="w-1/4 mb-4 pl-4">
<div class="font-medium text-base font-bold font-serif mb-4 pb-3">
<button type="submit" id="delete_appl_btn" name="delete_appl_btn"
class="mb-4 pb-3 w-full text-white px-4 py-3 rounded text-base font-medium
bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
shadow-2xl border-2 w-full p-4 rounded-lg">
Bewerbung zurückziehen
</button>
</div>
</div>
</div>
</div>
#endif
#endforeach
#endforeach
Here is the code for the modal:
<div id="delete_application_modal" class="modal fixed ml-96 top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white hidden">
<div class="mt-3 text-center text-xl">
Bewerbung zurückziehen
<div class="text-center text-sm mt-4">
</div>
</div>
<div class="items-center px-4 py-3">
<label for="delete_application" class="sr-only">Bewerbung zurückziehen</label>
<form action="{{ route('delete', $bewerbung->Bewerbung_ID) }}" method="post">
#csrf
<button type="submit" id="ok_btn" class="mb-4 pb-3 w-full text-white px-4 py-3 rounded text-base font-medium
bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
shadow-2xl border-2 w-full p-4 rounded-lg">
Bewerbung zurückziehen
</button>
</form>
</div>
<div class="items-center px-4 py-3">
<button id="back_btn_tel" class="mb-4 pb-3 w-full text-white px-4 py-3 rounded text-base font-medium
bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
shadow-2xl border-2 w-full p-4 rounded-lg">
zurück
</button>
</div>
</div>
#if(session()->has('message'))
<div class="alert alert-success">
{{ session()->get('message') }}
</div>
#endif
<script>
var delete_appl_modal = document.getElementById("delete_application_modal");
var open_modal = document.getElementById("delete_appl_btn");
var back_btn = document.getElementById("back_btn_tel");
open_modal.onclick = function () {
delete_appl_modal.style.display = "block";
}
back_btn.onclick = function () {
delete_appl_modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
delete_appl_modal.style.display = "none";
}
}
</script>
Honestly, I have zero clue why it works for the first but not for the others, they have the same buttons, with the same name, id & everything.
Maybe one of you had a similar issue. I wish you all happy holidays!
Edit:
New code to open the modal:
<script>
var delete_appl_modal = document.querySelector('#cancel_appl_modal');
var open = document.querySelector('#open_btn');
var back_btn = document.querySelector('#back_btn_tel');
open.onclick = function () {
delete_appl_modal.style.display = "block";
}
back_btn.onclick = function () {
delete_appl_modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
delete_appl_modal.style.display = "none";
}
}
</script>
When I use querySelectorALl then the first one doesn't work anymore as well
The id property is expected to be unique within a page, so when using getElementById once an element with that id has been located it doesn't continue searching for others.
As you have multiple button elements that you want to target, you will need to us something like querySelectorAll or getElementsByClassName to target every element that should trigger the modal to open.
An example to get you on the right direction.
<button class="open-modal">Button A</button>
<button class="open-modal">Button B</button>
<button class="open-modal">Button C</button>
let buttons = document.querySelectorAll('.open-modal');
buttons.forEach(button => {
button.addEventListener('click', function (event) {
// this is where you would open the modal
// delete_appl_modal.style.display = 'block';
console.log(event.target.innerHTML);
})
});
Example JSFiddle
I have two Divs (CSS is TailwindCss)
$(document).on("mouseover", "#imagebox", function() {
$("#PictureHoverPanel").removeClass("invisible");
})
$(document).on("mouseout", "#imagebox", function() {
$("#PictureHoverPanel").addClass("invisible");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" integrity="sha512-wl80ucxCRpLkfaCnbM88y4AxnutbGk327762eM9E/rRTvY/ZGAHWMZrYUq66VQBYMIYDFpDdJAOGSLyIPHZ2IQ==" crossorigin="anonymous" />
<div id="PictureHoverPanel" class="invisible absolute flex flex-col justify-center rounded-xl bg-gray-600 opacity-70">
<div class="flex justify-center">
<a class="bg-gray-800 px-2 py-1 text-white border border-red-800 font-semibold cursor-pointer">Remove</a>
</div>
</div>
<img id="imagebox" class="w-48 h-48 rounded-xl md:w-64 md:h-64" src="https://picsum.photos/seed/1/100">
The problem is as I enter #imagebox every mouse move triggers the mouseout event resulting in a really quick blink. How can I make sure that the invisible class will not be added unless the cursor is fully out of imagebox
$(document).on("mouseover", "#imagebox", function() {
$("#PictureHoverPanel").removeClass("invisible");
})
$(document).on("mouseout", "#imagebox", function() {
$("#PictureHoverPanel").addClass("invisible");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" integrity="sha512-wl80ucxCRpLkfaCnbM88y4AxnutbGk327762eM9E/rRTvY/ZGAHWMZrYUq66VQBYMIYDFpDdJAOGSLyIPHZ2IQ==" crossorigin="anonymous" />
<div id="PictureHoverPanel" class="invisible absolute flex flex-col justify-center rounded-xl bg-gray-600 opacity-70">
<div class="flex justify-center">
<a class="bg-gray-800 px-2 py-1 text-white border border-red-800 font-semibold cursor-pointer">Remove</a>
</div>
</div>
<img id="imagebox" class="w-48 h-48 rounded-xl md:w-64 md:h-64" src="/assets/photos/newyork1.jpg">
You can add #PictureHoverPanel as well to the event listener.
Like this:
$(document).on("mouseover", "#imagebox, #PictureHoverPanel", function() {
$("#PictureHoverPanel").removeClass("invisible");
})
$(document).on("mouseover", "#imagebox, #PictureHoverPanel", function() {
$("#PictureHoverPanel").removeClass("invisible");
})
$(document).on("mouseout", "#imagebox, #PictureHoverPanel", function() {
$("#PictureHoverPanel").addClass("invisible");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" integrity="sha512-wl80ucxCRpLkfaCnbM88y4AxnutbGk327762eM9E/rRTvY/ZGAHWMZrYUq66VQBYMIYDFpDdJAOGSLyIPHZ2IQ==" crossorigin="anonymous" />
<div id="PictureHoverPanel" class="invisible absolute flex flex-col justify-center rounded-xl bg-gray-600 opacity-70">
<div class="flex justify-center">
<a class="bg-gray-800 px-2 py-1 text-white border border-red-800 font-semibold cursor-pointer">Remove</a>
</div>
</div>
<img id="imagebox" class="w-48 h-48 rounded-xl md:w-64 md:h-64" src="https://picsum.photos/seed/1/100">