How to add hover effects on different elements from the same div - html

Hey everyone this is my first time posting here.
My question is how can I add different hover effects on elements from a div.
I have a div that contains 3 elements: an image, a button, and a paragraph, I already have a scale effect on the div to change the size of the whole container but I would also want to change the color of the button when hovering anywhere on the div, not necessarily on the button. The same applies to the image.
The div:
<div class="float_tab">
<img src="./NY_2.jpeg" alt="imagine"/>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam vel ipsum autem, sed aut sunt repellat laudantium aspernatur fugiat dolorem.</p>
<input class="btn" value="Enter" type="button">
</div>
The stylization
.float_tab:hover{
transform: scale(1.3);
}
.float_tab {
width: 210px;
height: 300px;
background-color: rgb(128, 177, 220, 0.7);
border-radius: 10px;
display: inline-block;
position: relative;
top:-1500px;
left: 570px;
margin-right: 100px;
transition: 1s;
}
img {
width: 210px;
height: 120px;
border-radius: 5px;
opacity: 0.8;
}
p {
text-align: center;
font-weight: bold;
font-size: 14px;
}
.btn {
height: 20px;
width: 90px;
margin-left: 60px;
margin-top: 10px;
background-color: #80b1dc;
align-items: center;
border-radius: 5px;
}

css will only apply effects to matching elements so:
<script>
.float_tab:hover img{
//css here
}
.float_tab:hover .btn{
//css here
}
</script>
<div class="float_tab">
<img src="./NY_2.jpeg" alt="imagine"/>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam vel ipsum autem, sed aut sunt repellat laudantium aspernatur fugiat dolorem.</p>
<input class="btn" value="Enter" type="button">
</div>
will do.

It is possible to add a new style for child elements:
.float_tab:hover input, img {
background-color: lightgreen;
}
An example:
.float_tab:hover input, img{
background-color: lightgreen;
}
<div class="float_tab">
<img alt="foo image" alt="imagine" />
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam vel ipsum autem, sed aut sunt repellat
laudantium aspernatur fugiat dolorem.</p>
<input class="btn" value="Enter" type="button">
</div>

Related

How to make the length of the <hr> tag the same size as the container?

I would like to create a line across my page, just under the Breaking News title but it should have the same length as the contents of my Flexbox under it.
What I would like to achieve:
The Breaking News text should also be aligned with my flexbox. Ergo I placed both of them inside the Flexbox. The problem now is that:
for me to get my desired outcome I need to set a fixed width, but this will affect the responsiveness of my side, some content stays hidden when you drag and minimize the browser
if I don't set fixed width, the line takes all the space in my flexbox.
* {
box-sizing: border-box;
font-family: 'Encode Sans', sans-serif;
}
.main-header {
font-weight: 700;
text-align: center;
margin-top: 50px;
margin-bottom: 20px;
font-size: 20;
}
.secondary-header {
text-align: center;
font-size: 10;
margin-top: 0px;
}
.breaking-news-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
gap: 25px;
margin-top: 150px;
}
.breaking-news-box {
width: 300px;
height: 400px;
border: 1px black;
border-style: dotted;
}
.breaking-news-images {
width: 100%;
object-fit: contain;
object-position: top;
}
.breaking-news-titles {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 0px;
padding-top: 10px;
margin-top: 15px;
margin-bottom: 0px;
}
.breaking-news-paragraph {
font-size: 12px;
padding-left: 15px;
padding-right: 15px;
}
.first-line {
margin: 0px;
padding: 0px;
}
<div class="breaking-news-title"> Breaking news </div>
<hr class="first-line" />
<div class="breaking-news-container">
<div class="breaking-news-box">
<img class="breaking-news-images" src="https://picsum.photos/id/1025/320/200">
<h3 class="breaking-news-titles">Missing dog found alive after 6 days</h3>
<p class="breaking-news-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odit cum. Provodient sin autem se olum ad enim sunt totam?</p>
</div>
<div class="breaking-news-box">
<img class="breaking-news-images" src="https://picsum.photos/id/1048/320/200">
<h3 class="breaking-news-titles">Elon Musk investigated over Twitter deal</h3>
<p class="breaking-news-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odit cum. Provodient sin autem se olum ad enim sunt totam?</p>
</div>
<div class="breaking-news-box">
<img class="breaking-news-images" src="https://picsum.photos/id/117/320/200">
<h3 class="breaking-news-titles">Billie Eilish announces Happier That Ever world tour</h3>
<p class="breaking-news-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odit cum. Provodient sin autem se olum ad enim sunt totam?</p>
</div>
<div class="breaking-news-box">
<img class="breaking-news-images" src="https://picsum.photos/id/160/320/200">
<h3 class="breaking-news-titles">EU approves common charging cable from 2024</h3>
<p class="breaking-news-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odit cum. Provodient sin autem se olum ad enim sunt totam?</p>
</div>
</div>
I found something about making the hr a pseudo element but it doesn't work.
Any thoughts?

In HTML, how do I make an Image in a table cell resize to text in the same row?

I'm creating an 'About' section for a website, which is a table with three equal-width columns: a headshot, a paragraph, and another paragraph (see screenshots below).
I'd like to have the image automatically resize (keeping its aspect ratio) to be the height of the largest text- aligned left within the cell- without hardcoding any height/width values. However, I've played around a bunch and nothing seems to make the image resize.
/* an element that's one-third the width of its container */
.third-width {
width: 33%;
}
/* the headshot photo */
#headshot {
border-radius: 5px;
max-width: 100%;
max-height: 100%;
display: inline-block;
}
#about-table td {
background-color: pink;
padding: 1vw;
text-align: justify;
vertical-align: top;
font-family: var(--body-font);
font-weight: lighter;
}
<table id="about-table">
<tr>
<td class="third-width">
<img id="headshot" src="https://via.placeholder.com/80" alt="None">
</td>
<td class="third-width">
<p>[... SOME TEXT ...]</p>
</td>
<td class="third-width">
<p>[... SOME TEXT ...]</p>
</td>
</tr>
Current state:
What I would like:
Thank you!
Use CSS Flex instead of table
Make the cells flex: 1; position: relative;
Make the image position: absolute; with 100% W/H and object-fit: cover to not distort the image
/* QuickReset */
* { margin:0; box-sizing: border-box; }
/* About component */
.About {
display: flex;
}
.About > div {
position: relative;
flex: 1;
outline: 1px solid #000;
padding: 20px;
}
.About > div img {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="About">
<div><img src="https://placekitten.com/408/287" alt="Catz!"></div>
<div>Lorem ipsum</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sunt nisi nostrum sed, assumenda sequi doloribus excepturi quibusdam obcaecati tenetur tempora voluptatibus eligendi dolorem. Excepturi perspiciatis ipsa porro, minus ea.</div>
</div>
<div class="About">
<div>Lorem ipsum</div>
<div>Molestiae sunt nisi nostrum sed, ipsa porro, minus ea.</div>
<div><img src="https://placekitten.com/500/300" alt="Catz!"></div>
</div>
<div class="About">
<div><img src="https://placekitten.com/310/290" alt="Catz!"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sunt nisi nostrum sed, assumenda sequi doloribus excepturi quibusdam obcaecati tenetur</div>
<div>Lorem ipsum</div>
</div>

How to align elements in three columns, even when resizing

Desired outcome: I have three columns. I need them to be all the same width, as well as text and buttons to be on the same level in all three of them.
Problem: Depending on the number of words, columns become wider and buttons start to jump when text is resizing, and all three texts are resizing on a different points. I need to prevent that. How can I achieve this?
HTML:
<section class="sub-offer">
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
quis!
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
incidunt odio?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
ullam quod porro atque error?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
</section>
CSS:
.sub-offer {
text-align: center;
display: flex;
position: relative;
.offer-container {
background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 15px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 4.3em;
width: 33%;
text-align: center;
}
p {
font-size: 12px;
margin-top: 2em;
padding: 0 0.5em 0 0.5em;
font-family: 'Montserrat', sans-serif;
}
a {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
background: white;
margin: 3em 0 2.5em 0;
padding: 0.5em;
text-decoration: none;
color: black;
&:hover {
background: #e5e5e5;
}
}
}
How they look now:
You can add a media query to change the flex-direction when the screen resizes.
Add the following indie .sub-offer class.
#media(max-width: 600px){
flex-direction: column;
}
Add the following inside h2 element.
#media(max-width: 600px){
width: 100%;
}
I solved my issue. To give all three columns the same width I've used what #tacoshy recommended in the comments: section.sub-offer { display: flex; } .offer-container { width: calc(100% / 3); }
To align all three buttons though leaving all them responsive I've wrapped my button into a div and used the following css:
.more-btn {
display: flex;
align-self: center;
margin-top: auto;
}
I'm not really a good dev, but I can give it a try. What I do when I want to make things line up perfectly is use grid, so I tried adding it to .offer-container like this .offer-container {display: grid; grid-template-rows: 1fr 1fr 1fr;}. A working example is below. Though, since I'm new to helping people on StackOverflow or really StackOverflow in general, I'm sure I didn't do something right. for example, providing a solution to a different problem or fixing issues that you didn't as for. If you need a list of what I changed, you can see that here: added } for sub-offer removed extra closing bracket on a{} separated &:hover to a:hover{} made <p> text white. I hope this is the solution you were looking for if your problem hasn't already been fixed.
.sub-offer {
text-align: center;
display: flex;
position: relative;
width:100px
}
.offer-container {
background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 15px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 4.3em;
width: 33%;
text-align: center;
}
p {
font-size: 12px;
margin-top: 2em;
padding: 0 0.5em 0 0.5em;
font-family: 'Montserrat', sans-serif;
color: white;
}
a {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
background: white;
margin: 3em 0 2.5em 0;
padding: 0.5em;
text-decoration: none;
color: black;
}
a:hover {
background: #e5e5e5;
}
<section class="sub-offer">
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
quis!
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
incidunt odio?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
ullam quod porro atque error?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
</section>

Why does the width of my web page not fill the entire screen width?

I have the majority of my code wrapped in a container with the following style:
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
padding-left: 0;
padding-right: 0;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
This is to enable me to scroll smoothly from one section of the page that takes up a height of 100vh to another. (That is why I have overflow: auto in my styling). However, when I add the "overflow: auto", the web page stops being the full width of my window (as shown in the image).
screenshot of problem
When I remove the "overflow: auto" and replace it with "overflow: none", then the width is fixed but my scrolling feature now longer works.
HTML Code here:
<body class="container-fluid">
<!-- Main Page -->
<div class="container">
<div class="section">
<div class="main row vertical-center">
<div class="main-image col-md-6">
<img src="rec/img/placeholder-image.png" alt="client_image">
</div>
<div class="main-text align-items-center col-md-6">
<h2 class="p-3">
Name Lastname
</h2>
<span class="align-bottom bottom-text-main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis nostrum illo? Vero necessitatibus accusamus ullam commodi, consequatur corrupti. Recusandae eligendi eaque possimus minima numquam dignissimos cumque adipisci tempora temporibus.
</span>
</div>
<span id="contact">
<!-- <ul class="contact-icons" style="list-style-type:none;">
<li></li></li>
<li></li>
<li></li>
</ul> -->
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
<!-- Information -->
<div class="section info">
<div class="information p-4 pb-0" id="information">
<h1 >More about me.</h1>
<br>
<div class="background ml-3">
<h5 class = "pb-1">Background</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti facilis, est distinctio esse temporibus sint animi sunt veniam asperiores commodi quo numquam excepturi nemo ab, harum, nam possimus quas veritatis!</p>
</div>
<div class="skills ml-3">
<h5 class="pb-1">Skills</h5>
<ul>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
</ul>
</div>
</div>
</div>
<!-- Experience -->
<div class="section">
<div class="experience p-3" id="experience">
<h1 class="pt-3">Work experience</h1>
<br>
<div class="xp">
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, aliquid. Quidem, quae dolorem! Amet ea obcaecati nam quia aliquid, facilis dolorem ab velit optio. Accusamus quidem commodi rerum itaque incidunt?
</div>
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus aperiam veritatis eos illo quo necessitatibus omnis illum iure impedit debitis, consectetur voluptatum quisquam, quae temporibus veniam. In minima quos perferendis.
</div>
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo officiis alias architecto non iure, quia labore rem. Totam nulla qui exercitationem beatae, ab aperiam! Asperiores soluta nisi repudiandae odit doloribus.
</div>
</div>
</div>
</div>
<!-- Additional Inforation -->
<div class="section">
<div class="additional-info p-3" id="additional-info">
<h1>Additional Information</h1>
<!-- <h1 class="second-line-info">Information</h1> -->
<div class="additional-info-text text-left">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, pariatur!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, pariatur at. Fuga error impedit officiis!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor facilis tempora odit vel cum adipisci, aut ducimus illum ab tenetur quae temporibus non. Velit rerum ipsa quis, sint blanditiis doloremque repellendus aliquid eius amet exercitationem!</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem, ipsum dolor.</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="section" id="footer">
<footer class="page-footer font-small blue pt-4">
<div class="container-fluid text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase">Name Lastname</h5>
<p>Cliche Inspiritional Quote Here</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-6 mb-md-0 mb-9">
<!-- Links -->
<h5 class="text-uppercase">Contact Links</h5>
<ul class="list-unstyled">
<li>
<i> Facebook</i>
</li>
<li>
<i> Instagram</i>
</li>
<li>
<i> Email</i>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
</footer>
</div>
</div>
Here is the CSS file:
body {
color: var(--grey);
width: 100%;
padding: 0;
margin: 0;
min-width: fit-content;
}
.container {
position: relative;
width: 100vh;
height: 100vh;
overflow: visible;
padding-left: 0;
padding-right: 0;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
.container .section {
position: relative;
height: 100%;
width: 100%;
scroll-snap-align: start;
/* background-blend-mode: multiply; */
}
/* .container.section:nth-child(1) {
background: ;
background-size: cover;
background-attachment: fixed;
} */
.main {
background-color: var(--white);
padding-left: 0%;
padding-right: 0%;
margin-top: 0rem;
margin-bottom: 0rem;
height: 100vh;
}
.main-image {
padding-top: 0%;
margin-left: 0%;
padding-right: 0;
margin-bottom: 2rem;
height: 50%;
}
.main-image img {
height: 100%;
width: 100%;
margin-left: 0%;
margin-right: 0%;
}
.main-text {
padding-bottom: 2rem;
height: 50%;
/* margin-left: 5%;
margin-right: 5%; */
}
.main-text p {
vertical-align: middle;
}
.information {
background-color: var(--soft);
height: 100vh;
padding-top: 0;
}
.experience {
background-color: var(--white);
height: 100%;
}
.information h1 {
padding-top: 1rem;
}
.background {
padding-top: 3rem;
}
.skills ul {
list-style-type: none;
}
.skills {
padding-top: 3rem;
}
.additional-info {
background-color: var(--soft);
height: 100vh;
padding-top: 1rem;
}
.additional-info h1 {
color: var(--grey);
}
.second-line-info {
margin-left: 5rem;
}
.additional-info-text {
text-align: center;
padding-left: 2rem;
padding-right: 2rem;
}
.additional-info-text p {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
#footer {
height: 10vh;
}
.list-unstyled i {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#media only screen and (min-width: 600px) {
html {
width: 100%;
}
body {
width: 100%;
padding: 0;
}
.main {
padding-top: 0%;
width: 100%;
}
.vertical-center {
display: flex;
align-items: center;
}
.main-image {
height: 100%;
margin-top: 15%;
}
.main-image img {
border-radius: 50%;
height: 50%;
width: 75%;
}
.main-text {
height: 100%;
margin-top: 20%;
}
.main-text h2 {
margin-bottom: 3rem;
}
#contact {
position: absolute;
bottom: 2%;
right: 2%;
}
.contact-icons {
padding: 0;
font-size: 2em;
display: table-cell;
}
.fa {
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.contact a {
display: inline-block;
width: 1.2em;
transition: all .2s ease-in-out;
}
a:hover {
text-decoration: none;
}
.additional-info {
text-align: left;
justify-content: left;
}
.additional-info-text p {
margin-top: 2rem;
}
/* BEVAN ONDER */
/* General */
body, html
{
width: 100%;
padding: 0;
margin:0;
}
.container{
width: 100%;
}
.container.section{
width: 100%;
}
/* Information page(s) */
.background{
padding-top: 2rem;
}
.skills{
padding-top: 2rem;
}
.background p{
width: 50%;
}
}
Is there a possible fix for this?
Use this css value
overflow:scroll
or
overflow:visible
Keeping them auto will let browser decide the overflow.
I personally never use auto value.
try this
overflow:scroll;
width:100vw
if didn't work please edit post and add html

Hover property not working for div from different containers

I have two different boxes when want to be able to change the properties of one box as I hover somewhere else.
I figured that if I have both boxes in the same container it works as you can see on my snippet here.
Here my html and css:
.first {
color: blue;
background: black;
width: 299px;
}
.first:hover + .second {
background: red;
color: white;
}
.second {
color: red;
background: black;
width: 300px;
margin-left: 10px;
}
.container {
display: flex;
}
<div class="container">
<div class="first">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam delectus quo corporis, n
</div>
<div class="second">
Lorem ipsum dolor sit amet, consectetur adipisicing e et magnam rem, doloribus libero quas numquam esse in culpa!
</div>
</div>
But how can I do the same thing if the boxes are not in the same container?
Thanks in advance.
If you use display: inline-block you can remove the use of the container but because you are using display: flex on the container class you won't have the advantage of the child items (the first and second divs) stretching to fill the height of the container. You could use a fixed height to keep them at an equal height.
.first{
color: blue;
background: black;
width: 299px;
display: inline-block;
}
.first:hover + .second {
background: red;
color: white;
}
.second{
color: red;
display: inline-block;
background: black;
width: 300px;
margin-left: 10px;
}
<div class="first">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam delectus quo corporis, n
</div>
<div class="second">
Lorem ipsum dolor sit amet, consectetur adipisicing e et magnam rem, doloribus libero quas numquam esse in culpa!
</div>
(post edited)
Use Jquery : Create a new class with a background color, it will be added with Jquery and removed when your mouse left the div.
Code : (don't forget to add jquery)
$('div.one').hover(function(){
$('div.two').toggleClass('three');
});
Check this :
https://jsfiddle.net/wnszbhj3/1/