We Keep Coding

JavaScript to find whether any div with a particular class was hovered over and then identify the exact div

Here is my HTML:
<div id="doc1" class="document-container-title">
<h3>Doc 1</h3>
</div>
<div id="doc2" class="document-container-title">
<h3>Doc 2</h3>
</div>
<div id="doc3" class="document-container-title">
<h3>Doc 3</h3>
</div>
As you can see, each div has a class of 'document-container-title'. I want to add some JavaScript to detect if any one of these divs were hovered over, and then I want to find out which specific div was hovered over. Specifically, I want to be able to detect whether a div with the class of document-container-title was hovered over. If so, then I want to get the id of the exact div that was hovered over.
I am only one month into JavaScript so a helpful explanation wouldn't hurt.
Thanks.
P.S. I don't mind using jQuery.

you can use jQuery mouseover or mouseenter event based on your requirement like this:
Based on this:
The mouseover event triggers when the mouse pointer enters the div
element, and its child elements.
However
The mouseenter event is only triggered when the mouse pointer enters
the div element.
$(".document-container-title").mouseover(function (e) {
console.log(e.currentTarget.textContent);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="doc1" class="document-container-title">
<h3>Doc 1</h3>
</div>
<div id="doc2" class="document-container-title">
<h3>Doc 2</h3>
</div>
<div id="doc3" class="document-container-title">
<h3>Doc 3</h3>
</div>

One solution is this one:
const elements = document.getElementsByClassName('document-container-title')
for (let element of elements) {
element.addEventListener('mouseenter', (e) => {
console.log(e.target.id);
});
}
First, you will iterate over your DOM to get all elements with the specified class. The defined constant elements is now an array of html elements that have the document-container-title class. After that, you will have a simple for loop to iterate over all gathered elements. Finally, you will add an event listener for the current element in the for loop that will trigger the mouseenter event. Then, you can easily get the target with their corresponding id.
Reproduction link

what should i do to avoid moving element on web page(html,css,jQuery)?

I am learning jQuery, and I wrote something like this:
$('#bt1').on('click',function() {
$('#area1').fadeToggle(1000);
});
and it works fine for one element. When I add one more element and place it next to the first element, the second element takes the place of the first when i click on bt1, because the first element disappears.
My question is: how to keep elements (div) in place, where they are at the beginning, when one element is hidden?

Use below solution instead of fadeToggle
$('#bt1').on('click',function() {
$("#area1").animate({opacity:($("#area1").css('opacity')==1)?0:1});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="area1">AREA 1
</div>
<div id="area2">AREA 2
</div>
<input type="button" value="submit" id="bt1">

Another solution would be to toggle visibility and keep the element in the DOM because fading out completely removes the element leaving a gap in the page

instead of .fadeIn() you can .animate({opacity:1})
and instead of .fadeOut() you can .animate({opacity:0})
and then, if you want to disable click events on hidden control, call this method
$('#YourElementId').css({visibility: "hidden"});

select sibling and parent divs for javascript/jquery

hi just a general question. When making a javascript/jquery what would be the easiest way to indivate a particualr sibling div, or parent div, with a particular class.
The scenario is sometihng like this
<div class="a">
<div class="b"> </div>
<div class="c">
<div class="d"> </div>
</div>
</div>
i would like to make clicking on div class b open div class c. I would also like to make clicking on div class d close div class c. div class b is a sibling div to div class c and div class c and div class c is a parent of div class d.
it is important that the javascript reffers to their parents or siblings because div class a (the container) will be repeated many times and each different instance of div class b and d should open different divs onclick, instead of all opening all instances with div class c.
so far i have thought of using something like an
event.target.getElementsByTagName("div")[]
- but actually i think this only looks for children of a particular div which really isnt what i want because im looking for indicating a sibling and a parent. anyone who knows how to do this who could point me in the right direction?

You can access the sibling via jQuery's .sibling() method:
$(.b).click(function () {
$(this).siblings('.c').addClass('open');
});
For more precise sibling selection you can use .prev('.c') or .next('.c').
There is also a general sibling selector represented by the tilde ~:
$('.b ~ .c');
// or
document.querySelectorAll('.b ~ .c');
For closing .c when clicked on .d I would rely on event bubbling:
$('.c').on('click', function (e) {
if ($(e.target).is('.d')) $(this).removeClass('open');
});

Have you tried using jquery's .parent() function?
$('div.d').parent().click(function(){
console.log($(this).text());
});

Jquery only affect one element in a class being hovered

Not sure if this is possible.
I want to select all elements with a class name and only affect the one element being hovered at that time and not the whole class. i can't use ids since they are a lot.
$('.hideme').hover(function(){
$('.hideme').hide();
});
and then.
<div class='hideme'></div>
when the above hides, the following shouldn't hide.
<div class='hideme'></div>
<div class='hideme'></div>
<div class='hideme'></div>

If you try to hide by using clss name, then DOM will hide all the element with same name.
So you have to use this keyword for selecting current hovered element.
Try following:
$('.hideme').hover(function(){
$(this).hide();
});

Jquery find next (specified) element not working

I am trying to find the next div using Jquery. Here is the code:
$('.menu-item').hover(function() {
$(this).stop(true, true).addClass("menu-item-hover", 300);
$(this).next('div').stop(true, true).fadeIn(300);
}, function() {
$(this).stop(true, true).removeClass("menu-item-hover", 300);
$(this).next('div').stop(true, true).fadeOut(300);
});
<div class="menu-item"><h1>Media</h1></div>
<div id="tooltip-media">Sights and sounds from Cambodia</div>
<div class="menu-item"><h1>About</h1></div>
<div id="tooltip-about">Who in the world is the Phillips Family?</div>
Simple. The toolip-* divs are hidden in css. I want the next one in the code to show on hover of the menu-item. I have checked other questions and none of them work for my case. I am using both Jquery and Jquery UI. Thanks for any help.

try this
$(this).parent().next('div').stop(true, true).fadeIn(300);
in your example , you are trying to find next div but it is not sibiling of menu item.
that only it did not work. traverse to parent and find next div it will work.
parent() , next()

First of all, .next() only grabs the immediate next sibling, it won't search through all sibilings. In order to do that, you would need to invoke .nextAll('div'). But even this function would not help you here, because that <div> nodes you are looking for are not contained by the same parent element.
You should go like
$( this ).parent().next( 'div[id^=tooltip]' ).stop( true, true ).fadeOut( 300 );
Reference: .next(), .nextAll()