Develop Reference

How does a element in children style change when something event to parent? (hover) [duplicate]

This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 1 year ago.
I have 3 component and every component have 3 element (i,h4,p),I want when I hover to one of these components to change the color of h4 using the array in JavaScript... How can i do it?
I'm new here and I didn't know how to add the code, so you can see the intended part through the bottom link, the last part
.services {
width: 80%;
margin: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.s-title {
width: 100%;
}
.s-items {
display: flex;
}
.s-item {
width: 30%;
text-align: center;
flex: 1;
margin: 20px;
transition: ease 0.5s;
}
.s-item:hover {
box-shadow: 4px 4px 10px #00bfb2;
transform: scale(1.05, 1.05);
}
<section class="services">
<div class="s-title">
<h1>MY SERVICES</h1>
<p>A LOAD UI/UX </p>
</div>
<div class="s-items">
<div class="s-item">
<i class="fa fa-paint-brush"></i>
<h4>Website Design </h4>
<p>As a leading designer</p>
</div>
<div class="s-item">
<i class="fa fa-code"></i>
<h4>Website Development </h4>
<p>As a developer.</p>
</div>
<div class="s-item">
<i class="fa fa-american-sign-language-interpreting"></i>
<h4>24x7 Support </h4>
<p>I offer experienced</p>
</div>
</div>
</section>

You don't need JavaScript for this. Just add this to your CSS:
.s-item:hover h4 {
color: red;
}
Example:
.services {
width: 80%;
margin: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.s-title {
width: 100%;
}
.s-items {
display: flex;
}
.s-item {
width: 30%;
text-align: center;
flex: 1;
margin: 20px;
transition: ease 0.5s;
}
.s-item:hover {
box-shadow: 4px 4px 10px #00bfb2;
transform: scale(1.05, 1.05);
}
.s-item:hover h4 {
color: red;
}
<section class="services">
<div class="s-title">
<h1>MY SERVICES</h1>
<p>A LOAD UI/UX </p>
</div>
<div class="s-items">
<div class="s-item">
<i class="fa fa-paint-brush"></i>
<h4>Website Design </h4>
<p>As a leading designer</p>
</div>
<div class="s-item">
<i class="fa fa-code"></i>
<h4>Website Development </h4>
<p>As a developer.</p>
</div>
<div class="s-item">
<i class="fa fa-american-sign-language-interpreting"></i>
<h4>24x7 Support </h4>
<p>I offer experienced</p>
</div>
</div>
</section>

How to add and align buttons on banner?

The banner should stay close to the info buttons like in this example:
I want to move this "Ads by Google" label left away from the buttons.
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.childNodes[0]);
}
body {
margin: 100px;
}
.banner-buttons {
display: inline-block;
position: relative;
font-size: 14px;
width: 50px;
overflow: hidden;
}
.showme {
display: none;
font-size: 10px;
}
.infoLink:hover .showme {
display: inline-block;
float: left;
}
.closeBtn {
cursor: pointer;
display: inline-block;
}
i:hover {
color: #d075f4;
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close"></i>
</div>
</div>
</div>
HTML code: Here is the html, you will find the two buttons and icons there. If there is something missing just ask and I will update the post.

Try changing your p to a div and moving it after the other stuff. Then adding CSS to move the ad part:
<div id="main">
<div class="nanoSaturnBanner">
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink"
href="https://support.google.com/adsense/#topic=3373519"
target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close"></i>
</div>
</div>
<div id="text">teteasdasdasdsadasds sad asdasdasdasdasdas</div>
</div>
then add this to the new div class
float: right;
margin-right: 50%;

How do I loop through a list of li tags having same class and change their corresponding styles

I have a list of li tags having same class and and i want to change
their styles and their children elements styles when ever a user hover
over each the li which is the container, below is the code I have
tried. I used getElementsByClassName to get the node list of all li
tags, now, what I want to do is add event listener to each one of them
and manipulate the style of each when ever a user triggers a mouseover
event
function doFirst(){
var playList = document.getElementsByClassName("list");
var play = document.getElementsByClassName("play");
var plus = document.getElementsByClassName("plus");
var title = document.getElementsByClassName("title");
function songHover (e){
playList[0].style.backgroundColor = "#ccc";
play[0].style.display = "block";
plus[0].style.display = "block";
title[0].style.width = "50%";
}
function songHoverOut (e){
playList[0].style.backgroundColor = "#fff";
play[0].style.display = "none";
plus[0].style.display = "none";
title[0].style.width = "auto";
}
playList[0].addEventListener("mouseover", songHover, false);
playList[0].addEventListener("mouseleave", songHoverOut, false);
}
window.addEventListener("load", doFirst, false);
content .song-list{
width: 100%;
height: auto;
}
content .song-list ul{
margin-bottom:4%;
display: flex;
flex-direction: column;
}
content .song-list ul > p{
width: 100%;
padding: 6% 0 1% 0;
font-size: 140%;
color: #2b32b2;
}
content .song-list ul li{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
height: 10%;
margin-bottom: 6%;
padding: 2%;
}
.title{
border: 0px solid red;
flex:1;
max-width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.title h4{
font-weight: normal!important;
font-size: 98%;
white-space: nowrap;
overflow: hidden;
margin-bottom: 4px;
width: 100%;
}
.title p{
font-size: 85%;
white-space: nowrap;
overflow: hidden;
margin-right: 8px;
}
.title p:first-child{
flex:1;
}
.title p:last-child{
max-width: 50%;
}
content .song-list ul li i{
display: none;
border: 0px solid red;
width: 15%;
text-align: center;
padding: 3.8% 0;
}
.play{
}
.plus{
}
.duration{
display: block;
border: 0px solid red;
margin-left: auto;
width: 20%;
text-align: right;
padding: 3.8% 0;
}
<div class="song-list">
<ul>
<p>A</p>
<li class="list">
<span class="title">
<h4>A Sky Full Of Stars</h4>
<p>Coldplay</p>
<p>Ghost Stories</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:28</span>
</li>
<li class="list">
<span class="title">
<h4>The A Team (george.ortha#ferialaw.com)</h4>
<p>Ed Sheeran</p>
<p>+</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:18</span>
</li>
<li class="list">
<span class="title">
<h4>Adore You</h4>
<p>miley Cyrus</p>
<p>bangerz</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:38</span>
</li>
<li class="list">
<span class="title">
<h4>Adorn (george.ortha#ferialaw.com)</h4>
<p>Miguel</p>
<p>Kaleidoscope Dream</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">3:13</span>
</li>
<li class="list">
<span class="title">
<h4>Again</h4>
<p>Fetty Wrap</p>
<p>Billboard Hot 100 Singles Chart</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">5:12</span>
</li>
</ul>
<ul>
<p>B</p>
<li class="list">
<span class="title">
<h4>
Back to December (george.ortha#ferialaw.com)
</h4>
<p>Tailor Swift</p>
<p>2011 Billboard Chart</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:43</span>
</li>
<li class="list">
<span class="title">
<h4>Bad (george.ortha#ferialaw.com)</h4>
<p>Wale</p>
<p>The Gifted</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:14</span>
</li>
<li class="list">
<span class="title">
<h4>Bad Blood</h4>
<p>Tailor Swift</p>
<p>2011 Billboard Chart</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">5:12</span>
</li>
<li class="list">
<span class="title">
<h4>Bartender</h4>
<p>Lady Antebellum</p>
<p>747</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">5:12</span>
</li>
<li class="list">
<span class="title">
<h4>Believe Me</h4>
<p>Lil Wayne</p>
<p>Believe Me</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">5:12</span>
</li>
</ul>
</div>

I think that simpler solution is css :hover pseudo class (change styles when user hovers element with cursor).
Example: .parent:hover .some-child {hover styles}.

You seem to be a bit confused about the "addEventListener". You do not have to add an event listener to the window to initialize the code. Simply wrap it in a (function(){ // Your code })(); and it will execute as soon as possible.
But here you have an jsfiddle about how you could go about it: https://jsfiddle.net/g59x59rr/12/
Though, I used "querySelectorAll" instead of "getElementsByClassName". But I hope my solution will make sense to you. :)
(function() {
var lielem = document.querySelectorAll(".li"), i;
for (i = 0; i < lielem.length; i++) {
lielem[i].addEventListener('mouseover', function() {
this.style.color = 'red';
this.addEventListener('mouseout', function(){
this.style.color = 'black';
});
});
}
})();
<ul>
<li class="li">First Li</li>
<li class="li">Second Li</li>
<li class="li">Third Li</li>
</ul>

How can I keep spans in the same line vertically?

Here is my code in reality:
.notifications_list{
margin-top: 1px;
padding-right: 15px;
direction: rtl;
overflow: scroll;
width: 100%;
height: 100%;
}
.notifications_list li{
list-style: none;
}
.notification_date_title{
font-size: 14px;
margin-top: 10px;
}
.note_icon{
}
.note_icon i{
font-size: 20px;
margin: 0px;
}
.note_type{
margin-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="notifications_list">
<div class="notification_date_title">امروز +5</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">2 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">دیروز +10</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">14 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">در هفته گذشته </div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-check"></i></span><span class="note_type">تایید جواب</span><span class="note_date_time">2 روز قبل</span></div></a>
</li>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">3 روز قبل</span></div></a>
</li>
</ul>
</div>
As you see, currently those icons and the texts aren't in the same line:
And this is expected result:
Note: The direction is right-to-left ..!
Well how can I do that?

You will need to make sure that the width of all your icons is the same.
You can use this using this css:
.note_icon i {
width: 20px;
}
The problem that you have there is that the icons are not the same width, so the elements near them are not aligned the same way.
The reason I changed the i element and not the span is because
span elements by default are inline, and the i element here is inline-block (due to the css of fontawesome).
inline blocks can't have width, so setting the width to the span element will not work, while setting the width to the i element (which is inline-block) will.
Here is a working version:
.note_icon i {
width: 20px;
}
.notifications_list{
margin-top: 1px;
padding-right: 15px;
direction: rtl;
overflow: scroll;
width: 100%;
height: 100%;
}
.notifications_list li{
list-style: none;
}
.notification_date_title{
font-size: 14px;
margin-top: 10px;
}
.note_icon{
}
.note_icon i{
font-size: 20px;
margin: 0px;
}
.note_type{
margin-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="notifications_list">
<div class="notification_date_title">امروز +5</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">2 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">دیروز +10</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">14 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">در هفته گذشته </div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-check"></i></span><span class="note_type">تایید جواب</span><span class="note_date_time">2 روز قبل</span></div></a>
</li>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">3 روز قبل</span></div></a>
</li>
</ul>
</div>

Since you have classes to all of them you can use padding to align them manually. Since their sizes are different I think this would be the easiest and most controllable way.
For example try this:
i.fa.fa-sort {
padding-right: 4px;
}
By the way the expected result seems the exact same like the "wrong" result... Not sure if that was posted by mistake.

jQuery submenu not displaying correctly

Here is my code here first menu working properly but when applied sub sub menu it's conflicting with previous li. You can check there is a list under food report . when clicking that child is not displaying.
$(document).ready(function() {
$(".menu_li").click(function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$('.child_ul').hide('slow');
$(this).children().children('.plus').show();
$(this).children().children('.minus').hide();
} else {
$(".menu_li").removeClass('selected');
$('.child_ul').hide('slow');
$(this).addClass('selected');
$('.plus').show();
$('.minus').hide();
$(this).children('.child_ul').show('slow');
$(this).children().children('.plus').hide();
$(this).children().children('.minus').show();
}
});
$(".menu_li1").click(function() {
if ($(".menu_li1").hasClass('selected')) {
$(".menu_li1").removeClass('selected');
$('.child_ul1').hide('slow');
$(".menu_li1").children('.child_ul1').children('.plus1').show();
$(".menu_li1").children('.child_ul1').children('.minus1').hide();
} else {
$(".menu_li1").removeClass('selected');
$('.child_ul1').hide('slow');
$(".menu_li1").addClass('selected');
$('.plus1').show();
$('.minus1').hide();
$(".menu_li1").children('.child_ul1').show('slow');
$(".menu_li1").children('.child_ul1').children('.plus1').hide();
$(".menu_li1").children('.child_ul1').children('.minus1').show();
}
});
});
.child_ul,
.child_ul1 {
display: none;
}
.left_menu ul li {
cursor: pointer;
}
.child_ul li,
.child_ul1 li {
border-left: 10px solid #222;
}
.child_ul,
.child_ul1 {
border-top: 1px solid #222;
}
.child_ul li a,
.child_ul1 li a {
background: #272525 none repeat scroll 0% 0% !important;
border-bottom: 1px solid #222;
}
.plus {
float: right;
margin-right: 5px;
}
.minus {
float: right;
margin-right: 5px;
}
ul li a {
background: #373737;
height: 30px;
padding-top: 14px;
display: block;
color: #949494;
text-decoration: none;
padding-left: 30px;
border-top: 1px solid #2f2f2f;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<li class='menu_li'>
<a>input form
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'></span>
</a>
<ul class='child_ul'>
<li>
কাজের বিনিময়ে খাদ্য
</li>
<li>
সেতু কালভারট
</li>
<li>
ঘূর্ণিঝড় আস্রয় কেন্দ্র
</li>
</ul>
</li>
<li class='menu_li'>
<a>Report
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul'>
<li class='menu_li1'>
<a>food report
<span class='plus1'><img src='plus.png'></span>
<span class='minus1' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul1'>
<li>
কাজের বিনিময়ে খাদ্য সাধারণ
</li>
<li>
কাজের বিনিময়ে খাদ্য সমন্নিত
</li>
</ul>
</li>
<li>
রিপোর্ট আর্কাইভ
</li>
</ul>
</li>

Thanks Tushar your comment helped me. I solved my problem I placed event.stopPropagation(); for my sub sub menu section then it worked properly. So I placed my own answer with snippet if it helped others.
$(".menu_li").click(function(event){
//$('.child_ul').hide('slow');
//$(this).children('.child_ul').toggle('slow');
if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
$('.child_ul').hide('slow');
$(this).children().children('.plus').show();
$(this).children().children('.minus').hide();
}else {
$(".menu_li").removeClass('selected');
$('.child_ul').hide('slow');
$(this).addClass('selected');
$('.plus').show();
$('.minus').hide();
$(this).children('.child_ul').show('slow');
$(this).children().children('.plus').hide();
$(this).children().children('.minus').show();
}
});
$(".menu_li1").click(function(event){
//event.preventDefault();
event.stopPropagation();
console.log('brick me!');
//$('.child_ul').hide('slow');
//$(this).children('.child_ul').toggle('slow');
if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
$('.child_ul1').hide('slow');
$(this).children('.child_ul1').children('.plus1').show();
$(this).children('.child_ul1').children('.minus1').hide();
}else {
$(".menu_li1").removeClass('selected');
$('.child_ul1').hide('slow');
$(this).addClass('selected');
$('.plus1').show();
$('.minus1').hide();
$(this).children('.child_ul1').show('slow');
$(this).children('.child_ul1').children('.plus1').hide();
$(this).children('.child_ul1').children('.minus1').show();
}
});
.child_ul,
.child_ul1 {
display: none;
}
.left_menu ul li {
cursor: pointer;
}
.child_ul li,
.child_ul1 li {
border-left: 10px solid #222;
}
.child_ul,
.child_ul1 {
border-top: 1px solid #222;
}
.child_ul li a,
.child_ul1 li a {
background: #272525 none repeat scroll 0% 0% !important;
border-bottom: 1px solid #222;
}
.plus {
float: right;
margin-right: 5px;
}
.minus {
float: right;
margin-right: 5px;
}
ul li a {
background: #373737;
height: 30px;
padding-top: 14px;
display: block;
color: #949494;
text-decoration: none;
padding-left: 30px;
border-top: 1px solid #2f2f2f;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<li class='menu_li'>
<a>input form
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'></span>
</a>
<ul class='child_ul'>
<li>
কাজের বিনিময়ে খাদ্য
</li>
<li>
সেতু কালভারট
</li>
<li>
ঘূর্ণিঝড় আস্রয় কেন্দ্র
</li>
</ul>
</li>
<li class='menu_li'>
<a>Report
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul'>
<li class='menu_li1'>
<a>food report
<span class='plus1'><img src='plus.png'></span>
<span class='minus1' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul1'>
<li>
কাজের বিনিময়ে খাদ্য সাধারণ
</li>
<li>
কাজের বিনিময়ে খাদ্য সমন্নিত
</li>
</ul>
</li>
<li>
রিপোর্ট আর্কাইভ
</li>
</ul>
</li>

If event.stopPropogation() doesn't work alone across different browsers try using event.preventDefault() along with event.stopPropogation().