We Keep Coding

How can I modify and image inside a DIV by passing the cursor over the DIV

I'm starting out at coding and I'm stuck in a code that I'm working on.
First I pass the mouse inside my DIV container called "Article" and everything inside change its opacity. I want just the image that is inside's opacity changed, so everywhere inside the DIV the opacity of the image should be 1. Once the mouse is out the opacity of the image should become 0.75. I tried multiple codes but the opacity changed for every element inside the DIV. Hope you could help me.
I tried to change document . getElementsByTagName ('article') [i] by document.getElementsByTagName('img')[i] but it just changed the image opacity when mouse is over the image.
I tried document.getElementsByTagName('article')[i].getElementsByTagName('img')[i] same as before.
I tried to change this.style by img.style nothing happened...
for (var i = 0; i<document.querySelectorAll('article').length;i++)
document.getElementsByTagName('article')[i].onmouseover=function(){
this.style.opacity = 1;
}
for (var i = 0; i<document.querySelectorAll('article').length;i++)
document.getElementsByTagName('article')[i].onmouseleave=function(){
this.style.opacity = 0.75;
}
Hope that when I pass over an article the image opacity changes.
Thanks, you all an have a great year!

Try using querySelectorAll('article img') instead of getElementsByTagName. This will only affect img inside article.

Thanks Guys in fact at the end I change to css and it works perfectly sorry for being such a noobie and say that this doesn't work. I named my Article (DIV) "Dad" and my image "child".
OMG it was to simple and I complicate my life by a lot.
This is my final code:
.Dad:hover .Child {
opacity: 1;
}

I'm not sure what are you asking for, but check this:
HTML
<div class="container">
<h3>this is container</h3>
<img src="https://picsum.photos/200/300/?123" alt="">
<img src="https://picsum.photos/200/300/?14" alt="">
<img src="https://picsum.photos/200/300/?15" alt="">
</div>
CSS
.container{
background: #d87300;
}
.half-transparent{
opacity: 0.5;
}
JS
const images = [...document.querySelectorAll('.container img')]
const container = document.querySelector('.container')
container.addEventListener('mouseenter', ()=>{
images.forEach(element => {
element.classList.add('half-transparent')
})
})
container.addEventListener('mouseleave', ()=>{
images.forEach(element => {
element.classList.remove('half-transparent')
})
})

first website, need assistance with certain click function

I have two tabs on this option. I have already created a mouseover and mouseleave for these two tabs. When you highlight one or the other, they share a background color.
However, now I am creating a click function. When you click on one of these tabs, I would like for it to maintain that background color, and even if the user highlighted the second time, it would not change color this time. Reason I want to do this is to show which tab is active, because each will have its own seperate content which will appear will clicked within the same div.
HTML code:
<div class="meal-details">
<h4>Lobster & Summer Vegetables with Spicy Herbed Butter</h4>
<h5 class="optiontabs meal-description">DESCRIPTION</h5>
<h5 class="optiontabs nutrition-description">NUTRITIONAL INFO</h5>
<div class="nutrition-breakdown">
<p>This is the nutrition info bro</p>
</div>
<div class="meal-breakdown">
<p>The meal breakdown and descrition.</p>
</div>
</div>
JQuery:
$(document).ready(function() {
$(".optiontabs").mouseover(function() {
$(this).css("background-color", "#3e597c");
});
$(".optiontabs").mouseleave(function() {
$(this).css("background-color", "#141C25");
});
$(".nutrition-description").click(function() {
$(this).css("background-color", "#3e597c");
$(this).nextAll(".nutrition-breakdown").css("display", "initial");
$(this).nextAll(".meal-breakdown").css("display", "none");
});
});
My question is, what is the best method to use in order to achieve what I have mentioned above. I have asked Jquery to change the background-color of the active tab but its not doing it. What am I doing wrong?
Thanks for the help in advance!

You have to unbind the mouseover and mouseleave once you click on an element once. You can do that using the $('element').off('event') syntax. Please look at the following code:
$(document).ready(function() {
var countClick = 0;
if(countClick==0) {
$(".optiontabs").mouseover(function() {
$(this).css("background-color", "#3e597c");
});
$(".optiontabs").mouseleave(function() {
$(this).css("background-color", "#141C25");
});
}
$(".nutrition-description").click(function() {
$(".optiontabs").off("mouseleave");
$(".optiontabs").off("mouseover");
countClick++;
$(this).css("background-color", "#3e597c");
$(this).nextAll(".nutrition-breakdown").css("display", "initial");
$(this).nextAll(".meal-breakdown").css("display", "none");
});
});

Using JS, how do I swap out a specifc instance of text instead of all instances?

Sorry if this is a really noobish question but I have just made a form with sections that are toggle-able. Each section has a '.header' which on click will perform a slideToggle on the section div.
I would like to add a triangle either pointing down or sideways to let people know it is toggle-able. (i.e ▶ or ▼).
I have the triangle in a span with the class '.arrowTog'
I was able to get partial success with
$('.header').on('click', function() {
if ($('.arrowTog').text().contains('▼')){
$('.arrowTog').text('▶');
}else{
$('.arrowTog').text('▼');
}
});
When I clicked on one all of the triangles swapped so I tried this (which causes none of them to rotate at all):
$('.header').on('click', function() {
if ($(this).prev('.arrowTog').text().contains('▼')){
$(this).prev('.arrowTog').text('▶');
}else{
$(this).prev('.arrowTog').text('▼');
}
});
This is a sample of the HTML
<div class="header" style="cursor: pointer;">
<span class="arrowTog">▶ </span>
<b>Merchant</b>
</div>
<div class="searchContent" style="display:none;">
Any ideas what I am doing wrong?
Thanks!

In your first version, the problem is you're finding every .arrowTog in the page. You can use the fact that within the click handler, this is bound to the element that was clicked, and then just search within that using find:
$('.header').on('click', function() {
var arrow = $(this).find('.arrowTog');
if (arrow.text().contains('▼')){
arrow.text('▶');
} else {
arrow.text('▼');
}
});

You're using a class. You probably have a number of elements with the same class in it, so jQuery is matching all of them and doing this transformation to all of them.
Use a context (All .arrowTog RIGHT INSIDE THIS NODE):
$('.header').on('click', function(evt) {
if ($('.arrowTog', evt.target).text().contains('▼')){
$('.arrowTog', evt.target).text('▶');
}else{
$('.arrowTog', evt.target).text('▼');
}
});

Why not use CSS?
.arrowTog:before {
content: '▶';
}
.arrowTog.open:before {
content: '▼';
}
And then
$('.header').on('click', function() {
$(this).toggleClass('open');
});

Give multiple divs the same function

I want to create multiple thumbnails with the same .class. The thumbnail div contains 3 other divs. The first on is an image, the second one is a description which appear on mouseenter and the third one is a bar which change the opacity.
When the mouse hovers above the .thumbnail both elements should execute their function.
My Problem is that now every thumbnail executes the function, so every thumbnail is now highlighted. How can I change this so only one Thumbnail highlights while hovering above it?
HTML:
<div class="thumbnail">
<div class="thumbnail_image">
<img src="img/Picture.png">
</div>
<div class="thumbnail_describe">
<p>Description</p>
</div>
<div class="thumbnail_footer">
<p>Text</p>
</div>
</div>
jQuery:
$(document) .ready(function() {
var $thumb = $('.thumbnail')
var $thumb_des = $('.thumbnail_describe')
var $thumb_ft = $('.thumbnail_footer')
//mouseover thumbnail_describe
$thumb.mouseenter(function() {
$thumb_des.fadeTo(300, 0.8);
});
$thumb.mouseleave(function() {
$thumb_des.fadeTo(300, 0);
});
//mouseover thumbnail_footer
$thumb.mouseenter(function() {
$thumb_ft.fadeTo(300, 1);
});
$thumb.mouseleave(function() {
$thumb_ft.fadeTo(300, 0.8);
});
});

You code behave like this because you apply the fadeTo function to the $thumb_des and $thumb_ft selectors which contain respectively all the descriptions and footers of the page.
Instead, you should select the description and footer of the thumbnail triggering the mouse event, inside the mousenter or mouseleave functions.
Another thing you could change to optimize your code is to use only once the event listening functions, and perform both actions on the description and on the footer at the same time:
$thumb.mouseenter(function() {
var $this = $(this)
$this.find('.thumbnail_describe').fadeTo(300, 0.8);
$this.find('.thumbnail_footer').fadeTo(300, 1);
});
full working jsfiddle: http://jsfiddle.net/Yaz8H/

When you do:
$thumb_des.fadeTo(300, 0.8);
it fades all nodes in $thumb_des. What you want is to fade only the one that corresponds to the correct node in $thumb.
Try this:
for (i = 0; i < $thumb.length; i++)
{
$thumb[i].mouseenter(function (des) {
return function() {
des.fadeTo(300, 0.8);
};
}($thumb_des[i]));
});
}

You'll want to access the child objects of that particular thumbnail, something like this would work:
$(this).children('.thumbnail_describe').fadeTo(300, 0.8);
Here is a fiddle example.

how to make div click-able?

<div><span>shanghai</span><span>male</span></div>
For div like above,when mouse on,it should become cursor:pointer,and when clicked,fire a
javascript function,how to do that job?
EDIT: and how to change the background color of div when mouse is on?
EDIT AGAIN:how to make the first span's width=120px?Seems not working in firefox

Give it an ID like "something", then:
var something = document.getElementById('something');
something.style.cursor = 'pointer';
something.onclick = function() {
// do something...
};
Changing the background color (as per your updated question):
something.onmouseover = function() {
this.style.backgroundColor = 'red';
};
something.onmouseout = function() {
this.style.backgroundColor = '';
};

<div style="cursor: pointer;" onclick="theFunction()">
is the simplest thing that works.
Of course in the final solution you should separate the markup from styling (css) and behavior (javascript) - read on it on a list apart for good practices on not just solving this particular problem but in markup design in general.

The simplest of them all:
<div onclick="location.href='where.you.want.to.go'" style="cursor:pointer"></div>

I suggest to use jQuery:
$('#mydiv')
.css('cursor', 'pointer')
.click(
function(){
alert('Click event is fired');
}
)
.hover(
function(){
$(this).css('background', '#ff00ff');
},
function(){
$(this).css('background', '');
}
);

I suggest to use a CSS class called clickbox and activate it with jQuery:
$(".clickbox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
Now the only thing you have to do is mark your div as clickable and provide a link:
<div id="logo" class="clickbox"></div>
Plus a CSS style to change the mouse cursor:
.clickbox {
cursor: pointer;
}
Easy, isn't it?

add the onclick attribute
<div onclick="myFunction( event );"><span>shanghai</span><span>male</span></div>
To get the cursor to change use css's cursor rule.
div[onclick] {
cursor: pointer;
}
The selector uses an attribute selector which does not work in some versions of IE. If you want to support those versions, add a class to your div.

As you updated your question, here's an obtrustive example:
window.onload = function()
{
var div = document.getElementById("mydiv");
div.style.cursor = 'pointer';
div.onmouseover = function()
{
div.style.background = "#ff00ff";
};
}

<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div>
This will change the background color as well

If this div is a function I suggest use cursor:pointer in your style like style="cursor:pointer" and can use onclick function.
like this
<div onclick="myfunction()" style="cursor:pointer"></div>
but I suggest you use a JS framework like jquery or extjs