Develop Reference

Select a div inside another div outside the currect div:hover

I am trying to show the .right-text1 element (which is inside .right-container div) when the mouse hovers over .project1 element (which is inside .left-container div). However, I am unable to code it with CSS since selectors work only inside the current parent div.
I have the following code:
.left-container {
float: left;
width: 25%;
}
.left-container li {
list-style: none;
padding: 10px;
font-size: 20px;
border: 2px solid;
margin-top: 5px;
}
.right-container {
width: 74%;
float: right;
margin-top: 16px;
height: 200px;
}
.right-text1,
.right-text2,
.right-text3,
.right-text4 {
border: 2px solid;
padding: 5px;
height: 50%;
margin-bottom: 3px;
}
/* This is where I try to show RIGHT-TEXT1 upon hovering on PROJECT1 div,
but the selector does not work due to trying to access .right-text1 but it is outside the current DIV */
.project1:hover~.right-text1 {
display: none;
}
<div class="left-container">
<ul>
<div class="project1">
<li>Project 1</li>
</div>
<div class="project2">
<li>Project 2</li>
</div>
<div class="project3">
<li>Project 3</li>
</div>
<div class="project4">
<li>Project 4</li>
</div>
</ul>
</div>
<div class="right-container">
<div class="right-text1" style="background-color: tomato;">
Information about Project 1
</div>
<div class="right-text2" style="background-color: teal;">
Information about Project 2
</div>
<div class="right-text3" style="background-color: green;">
Information about Project 3
</div>
<div class="right-text4" style="background-color: yellow;">
Information about Project 4
</div>
</div>
It is imperative to keep the format, where the two containers reside next to each other and 25% and 74% width stays.
It might be super easy, but I am learning CSS for a week now and this stumbled me.
Any help would be greatly appreciated.

As explaned in the comments, you'll need JS for that.
Here a sample that adds a class on mouse enter, and remove it on mouse leave, mimicking the hover effect.
document.querySelectorAll('[data-project]').forEach(project => {
const name = project.dataset.project
const infoElement = document.querySelector(`[data-project-info="${name}"]`)
// Mouse enter
project.addEventListener('mouseenter', () => {
infoElement.classList.add('is-hovered')
})
// Mouse leave
project.addEventListener('mouseleave', () => {
infoElement.classList.remove('is-hovered')
})
})
.left-container {
float: left;
width: 25%;
}
.left-container li {
list-style: none;
padding: 10px;
font-size: 20px;
border: 2px solid;
margin-top: 5px;
}
.right-container {
width: 74%;
float: right;
margin-top: 16px;
height: 200px;
}
.right-text1,
.right-text2,
.right-text3,
.right-text4 {
border: 2px solid;
padding: 5px;
height: 50%;
margin-bottom: 3px;
display: none;
}
.right-text1.is-hovered,
.right-text2.is-hovered,
.right-text3.is-hovered,
.right-text4.is-hovered {
display: block;
}
<div class="left-container">
<ul>
<div class="project1" data-project="1">
<li>Project 1</li>
</div>
<div class="project2" data-project="2">
<li>Project 2</li>
</div>
<div class="project3" data-project="3">
<li>Project 3</li>
</div>
<div class="project4" data-project="this-text-matches-here">
<li>Project 4</li>
</div>
</ul>
</div>
<div class="right-container">
<div class="right-text1" style="background-color: tomato;" data-project-info="1">
Information about Project 1
</div>
<div class="right-text2" style="background-color: teal;" data-project-info="2">
Information about Project 2
</div>
<div class="right-text3" style="background-color: green;" data-project-info="3">
Information about Project 3
</div>
<div class="right-text4" style="background-color: yellow;" data-project-info="this-text-matches-here">
Information about Project 4
</div>
</div>

JQuery collapse div on img click

I have a two part question concerning CSS styling and JQuery functionality.
(most important): In my code below, when the user clicks the round profile image, hypothetically the "profiledrop" div should appear. If I replace the tag with plain text, the code works just fine. However, with an image instead of text as the link, the code no longer works.
(less important): What is causing the "notification-tab" div to be so large? It ends up coming out to almost 100px for each div, which is massive! I want to at least half this size. What part of the CSS code do I need to modify to accomplish this?
I've been typing this code for the last 10 hours, so I'm basically braindead at this point. I'm sure both answers are simple, but I'm just not seeing the solution. Thank you in advance for your help!
Codepin: https://codepen.io/dansbyt/pen/xxgayPa?editors=1010
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://mrdansby.com/private/style.css">
<div class="dropdown-container">
<div class="profile"><a href="#" id='launch'><img src='https://mrdansby.com/resources/pics/1.png'></a></div>
<ul class="profiledrop">
<li class="notification-group nopic">
<div class="notification-tab">
<h4>Tasks</h4>
<span class="label">1</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message"><b>Mr. Teacher</b> is requesting you complete the assignment you need to do before the deadline on Monday.</p>
<span class="date">2m ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Behavior</h4>
<span class="label">4</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/4.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5s ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/23.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">15m ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5h ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/13.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Homework</h4>
<span class="label">3/3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
</ul>
</div>
CSS:
/* Notification Infastructure */
.profiledrop {
position: absolute;
right: 15px; top: 65px;
display: none;
width: 350px; height: auto;
max-height: 600px;
padding: 0; margin: 0;
overflow-y: hidden;
background: #eee;
border-top: 4px solid #5B7042;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);
box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);}
.notification-group{
border-bottom: 1px solid #e3e3e3;
overflow: hidden;}
.notification-tab {
width: 100%;
display: inline-block;
border-bottom: 1px solid #e3e3e3;}
.notification-list{
height: 0px;
max-height: 250px;
padding: 0;
overflow-y: auto;
transition: height .5s;}
.notification-list-item{
display: block;
min-height: 60px;
overflow: hidden !important;
box-sizing: border-box !important;
padding: 15px 15px 15px 10px;
font-size: 16px;
border-bottom: 1px solid #e3e3e3}
.notification-list-item:nth-child(even) {background-color: #E3E3E3}
.notification-list-item img {
clip-path: circle();
float: left;
margin-right: 10px;
width: 60px; height: 60px;
object-fit: cover}
/* Misc Settings */
.message::not(.nopic) {margin-top: 0px; margin-left: 80px} /* Style for notification groups without image */
/* Notification text styling */
.label{
float: right;
padding: 0px 7px;
margin-top: 20px;
margin-right: 10px;
border: 1px solid #5B7042;
border-radius: 15px;}
h4 {margin-left: 10px}
h4, .label{display: inline-block;}
.message {margin-top: 0px}
.date {float: right; color: darkgray}
/* Active Section */
.active .notification-list {height: 250px;}
.active .notification-tab, .notification-tab:hover {background-color: #5B7042}
.active .label, .notification-tab:hover .label {border: 1px solid white}
.notification-tab:hover {color: white}
.active .label, .active h4 {color: white}
/* Responsive design */
#media only screen and (max-width : 514px) {
body {margin: 0px}
.profiledrop{
width: 100%;
margin: 0px;
left: 0;}
}
.profile{
position: absolute;
top: 0%; right: 15px;
width: 40px;
clip-path: circle();}
.profile img{float:right; max-width: 100%; max-height: 100%; display: block;}
JQUERY:
// Tab collapser //
$('.notification-tab').click(function(e){
if($(e.currentTarget).parent().hasClass('active')){
$('.notification-group').removeClass('active');
} else{
$('.notification-group').removeClass('active');
$(e.currentTarget).parent().toggleClass('active');
}
});
// Click outside collapser //
$(document).on('click', function(e) {
if (e.target.id != "launch") {
if ($(e.target).closest(".profiledrop").length === 0) {
$(".profiledrop").hide();
}
}
});
// Menu Launcher //
$("#launch").click(function() {
$(".profiledrop").show();
});

'launch' should be on the img element, such as:
<div class="profile">
<a href="#">
<img id='launch' src='https://mrdansby.com/resources/pics/1.png'>
</a>
</div>

I'll answer your second question first. The reason the notification tab is so large is that the .profiledrop class has a fixed width of 300px. Each notification group is inheriting the width of the parent, so those are also 300px. Each notification tab has a width of 100%, so its width becomes 100% of the nearest parent, which is the notification group, which is 300px, so that also becomes 300px.
To summarize this point, either change the width: 100% on the notification tab, or change the width: 300px on the profiledrop. I can't recommend which to do because I don't know what you want it to look like.
The simplest solution to your first question is to employ display: none. Take a look at the code snippet I've provided below and let me know if this is the behavior you're looking for.
const image = document.querySelector("#myimage");
const paragraph = document.querySelector("p");
// I attach an event listener to the image to wait for a click event
image.addEventListener("click", function() {
if (paragraph.style.display === 'none') {
// If the paragraph is currently hidden, I show it
paragraph.style.display = 'block';
} else {
// If the paragraph is currently shown, I hide it
paragraph.style.display = 'none';
}
})
<img id="myimage" src="https://via.placeholder.com/350x150">
<p>Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the
image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click
on the image. Click on the image. Click on the image. Click on the image. Click on the image. Click on the image. </p>

Opacity on selected option

i have a toggle button to allow user to select 1 or 2 rows
So when user click on the id it will remove or add the class and show diferents rows, so i need to add an opacity on the toggle button, how?, i need to show an opacity on the actual selected toggle button.
jQuery("#one-row").click(function () {
$('.product-list').removeClass('-two-columns');
$('.product-list').addClass('-one-columns');
});
jQuery("#two-rows").click(function () {
$('.product-list').removeClass('-one-columns');
$('.product-list').addClass('-two-columns');
});
.toggle-one{
background-image: url(images/toggle_1.svg);
width: 30px;
height: 10px;
float: right;
display: inline-block;
cursor: pointer;
}
.toggle-two{
background-image: url(images/toggle_2.svg);
width: 30px;
height: 10px;
float: right;
display: inline-block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-rows" style="top: 118px;
right: 30px;
position: absolute;">
<nav>
<ul>
<li style="display: inline-block;">
<div class="toggle-one " id="onw-row">
</div>
</li>
-
<li style="display: inline-block;">
<div class="toggle-two" id="two-rows">
</div>
</li>
</ul>
</nav>
</div>

I'd say, add two lines each for the buttons similar to this:
jQuery("#one-row").click(function () {
$('.product-list').removeClass('-two-columns');
$('.product-list').addClass('-one-columns');
$("#one-row").css("opacity", "1");
$("#two-rows").css("opacity", "0.3");
});
jQuery("#two-rows").click(function () {
$('.product-list').removeClass('-one-columns');
$('.product-list').addClass('-two-columns');
$("#one-row").css("opacity", ".0.3");
$("#two-rows").css("opacity", "1");
});

Trying to use two <div> inside a <li>, which are supposed to run a script. [Not sure if it's possible]

Not sure if what i am trying to do is going to work, but i want to insert inside a li two div that will run some script for some links that are inside them. A bit confusing, i know, i cant explain it in a better way.
Take a look at my code:
Inside the body of HTML
<ul>
<li> TEST </li>
<li> TEST 2
<ul>
<li>
<div id="dock2" class="dock">
<div class="dock-container2" style="left: 760px; width: 400px;">
<ul>
<li><a class="dock-item2" href="#" style="width: 40px; left: 0px;"><span style="display: none;">Home</span><img alt="home" src="Inc/Images/dock/home.png"/></a> </li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 40px;"><span style="display: none;">Contact</span><img alt="contact" src="Inc/Images/dock/email.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 80px;"><span style="display: none;">Portfolio</span><img alt="portfolio" src="Inc/Images/dock/portfolio.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 120px;"><span style="display: none;">Music</span><img alt="music" src="Inc/Images/dock/music.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 160px;"><span style="display: none;">Video</span><img alt="video" src="Inc/Images/dock/video.png"/></a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li> TEST 3 </li>
</ul>
The script that is running inside the div, also in the body of HTML
<script type="text/javascript">
$(document).ready(function(){
$('#dock2').Fisheye({
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
And finally the CSS
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background:url(Inc/Images/dock/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: absolute;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background:url(Inc/Images/dock/dock-bg.gif);
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
So what i am actually trying to do, is put inside a list a dock that acts like OS X, moving the mouse over the icons making them to zoom, though with the above code the zoom doesn't work.
If i move the part of the dock outside the list and put it somewhere in the body, everything works as it should, but inside the list no animation.
I am not sure at all if this is possible, having an animation running inside a li, any help is really appreciated.
P.S I also have an another CSS that is about the li style, but i thing its irrelevant to the question so i didn't include it.
Edit: Added it on jsfiddle. Link: http://jsfiddle.net/UTw84/3/
The dock i am trying to make is this one: http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html
Note: on jsfiddle it doesn't show the icons, probably because there is no path for them.
Edit 2: The problem was/is with CSS. i made some changes and its working better now. http://jsfiddle.net/UTw84/7/

http://jsfiddle.net/UTw84/4/
Is this what you want ?
I just added something to your CSS selector :
#main-list ul li > ul {
display: none;
position: absolute;
text-align: center;
}
The last CSS selector was overriding the :hover selector.
EDIT :
I see.
http://jsfiddle.net/UTw84/5/
It works here but when you want to put a "left" property to the main-dock, it breaks everything.

dropdown menu for asp.net website

I need a drop down menu for my asp.net website where I can have menu items as well as images. I need one like http://www.petcarerx.com/. If I keep mouse on any of menu item on blue bar ( Dogs, Cats, Other Pets, A drop down menu opens with menu items and some images. I want it to expand to full length horizontally. Please suggest me which control should I use?
Regards,
Asif Hameed

I have had good experiences with the Kendo UI menu by Telerik.

searching a little google, i stumbled upon this website:http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/
have a great tutorial for a great kind of jquery drop down menu

I use Superfish for this purpose.Multilevel and Image supported when slightly customize it.

use telerik menu control...
http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/templates/defaultcs.aspx

A quick example for you:
HTML:
<ul id="menu">
<li>Home</li>
<li>
about
<div class="submenu">
<div class="col1 border-right">
<ul>
<li>about link 1</li>
<li>about link 2</li>
<li>about link 3</li>
<li>about link 4</li>
</ul>
</div>
<div class="col2 border-right">
<img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
</div>
<div class="col3">
<img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
</div>
</div>
</li>
...
...
...
</ul>
jQuery:
$("ul#menu li").hover(function(){
$(this).find('a').next('.submenu').stop(true, true).slideToggle(300);
}, function(){
$(this).find('a').next('.submenu').stop(true, true).slideToggle(200);
})​
CSS:
ul#menu {
width: 100%;
position: relative;
height: 30px;
background:#ccc;
border-bottom: 1px solid #666;
}
ul#menu li {
display: block;
float: left;
height: 30px;
line-height: 30px;
}
ul#menu li a { display: block; padding: 0 20px; }
.submenu {
position: absolute;
width: 100%;
left: 0px;
display: none;
border-bottom: 1px solid #ccc;
}
ul#menu li div.submenu ul li {
float: none;
}
.col1, .col2, .col3 {
width: 33%;
background: #f4f4f4;
float: left;
}
.col2, .col3 {
text-align: center;
}
.border-right { border-right:1px solid #ccc; }
DEMO
​