I want to setup a animation for the backdrop-filter property. When I use plain CSS it works but when I toggle the class in JS it doesn't work anymore.
I have tried to isolate the problem but I don't understand how to solve it.
MENU HTML
<nav id="main-menu">
<ul>
<a href="http://localhost/jorime/">
<li>Work</li>
</a>
<!-- <li>Services</li> -->
<a href="#">
<li id="contact-link">Contact</li>
</a>
</ul>
</nav>
CONTACT HTML
<section id="contact-wrapper" class="hide">
<section id="contact-content">
<section id="contact-close-button">
<button>X</button>
</section>
<section id="contact-header">
<h2>Contact</h2>
<p class="importent">Feel free to leave a message!</p>
</section>
<section id="contact-body">
<form action="">
<input type="text" class="contact-form-field" id="contact-form-name"
placeholder="Enter your name" />
<input type="text" class="contact-form-field" id="contact-form-email"
placeholder="Enter your email" />
<textarea class="contact-form-field" rows="10" id="contact-form-message"
placeholder="Enter your message"></textarea>
<section class="flex-right">
<input id="contact-form-submit" type="submit" value="submit" />
</section>
</form>
</section>
</section>
</section>
CSS
#contact-wrapper{
display: block;
backdrop-filter: blur(5px);
background-color: rgba(0,0,0, .75);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: backdrop-filter 1.5s;
}
#contact-wrapper.hide{
display: none;
backdrop-filter: blur(0px);
transition: backdrop-filter 1.5s;
}
JS
function toggleClass(elementId, cssClass){
var element = document.getElementById(elementId);
element.classList.toggle(cssClass);
}
window.onload = function(){
document.getElementById("contact-link").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
document.getElementById("contact-close-button").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
}
I want the backdrop transition working.
Can anyone help me? Thanks!
Answer:
You can't animate the Display property.
You can simulate this by using other properties like opacity, visibility, and adjusting height and/or width. Often used is setting the opacity and height to 0. This causes a similar effect to display: none since it causes the element to effectively remove the space it takes up in the DOM while rendering it invisible. Note You may also need to set padding, width, and margin to 0 if you truly want it to be as minimally existent in the DOM as possible.
You also can't transition just one property like backdrop-filter when some other altered property causes the element to be invisible. why? because it's interpreted by the Browser as "immediately make this element invisible while transitioning the other properties*." Basically it makes the whole operation pointless.
The syntax in your case to add multiple properties to transition is something like this:
transition: prop time, prop time, prop time;
If all altered properties are to be transitioned you can also just use:
transition: all 1.5s;
Example:
NOTE I updated with your menu code. I don't know where the menu is located, but to get it work with the demo code I had to alter the z-index depending on if hide was applied. This is because of the fixed top-left nature of the contact-wrapper. Depending on your markup you may not need to alter this or may need to alter it differently.
function toggleClass(elementId, cssClass){
var element = document.getElementById(elementId);
element.classList.toggle(cssClass);
}
window.onload = function(){
document.getElementById("contact-link").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
document.getElementById("contact-close-button").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
}
#contact-wrapper{
display: block;
opacity: 1;
backdrop-filter: blur(5px);
background-color: rgba(0,0,0, .75);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: opacity 1.5s, margin 1.5s, padding 1.5s, height 1.5s, backdrop-filter 1.5s;
}
#contact-wrapper.hide{
opacity: 0;
height: 0;
padding: 0;
margin: 0;
z-index: -1;
backdrop-filter: blur(0px);
}
<nav id="main-menu">
<ul>
<a href="http://localhost/jorime/">
<li>Work</li>
</a>
<!-- <li>Services</li> -->
<a href="#">
<li id="contact-link">Contact</li>
</a>
</ul>
</nav>
<section id="contact-wrapper" class="hide">
<section id="contact-content">
<section id="contact-close-button">
<button>X</button>
</section>
<section id="contact-header">
<h2>Contact</h2>
<p class="importent">Feel free to leave a message!</p>
</section>
<section id="contact-body">
<form action="">
<input type="text" class="contact-form-field" id="contact-form-name"
placeholder="Enter your name" />
<input type="text" class="contact-form-field" id="contact-form-email"
placeholder="Enter your email" />
<textarea class="contact-form-field" rows="10" id="contact-form-message"
placeholder="Enter your message"></textarea>
<section class="flex-right">
<input id="contact-form-submit" type="submit" value="submit" />
</section>
</form>
</section>
</section>
</section>
Related
I have a simple HTML drawer that contains product recommendations. Javascript is used to toggle it open and close. In the HTML, there are 2 prices, the regular price and the discounted price. Both are visible on load. The JS is supposed to hide the discounted price(current price), if the current price is the same as the old price. Because then it's not necessary to show both(identical prices). But if there is an offer, it's supposed to show both.
The problem is, my javascript for opening and closing the drawer is working, but the code for hiding/showing both prices aren't. And I know the code is fine because it works on another product recommendation template I'm using(which isn't a drawer, but normal on-page element).
I've tried putting the price-code before the drawer-function code, but then the drawer doesn't respond to clicks and does not open anymore.
When I use Preview in the software I'm using to inject product recommendations(Dynamic Yield), the prices are shown correctly. It's only when I preview it on the website itself, that it doesn't work. Both prices are shown even if they match.
Here is the JS:
(function() {
var container = document.querySelectorAll('.dy-sliding-drawer-container')[0];
var handler = container.querySelector('.dy-sliding-handle');
function toggle() {
if (container.className.indexOf('dy-open') > -1) {
container.className = container.className.replace('dy-open','');
} else {
container.className = container.className.trim() + ' dy-open';
}
}
handler.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
toggle();
});
})();
var mq = window.matchMedia( "(max-width: 599px)" );
var itemPrices = document.querySelectorAll('.price-box');
for(var i=0; i<itemPrices.length; i++){
var discount_price_element = itemPrices[i].getElementsByClassName("dynamic-price")[0];
var price_element = itemPrices[i].getElementsByClassName("regular-price")[0];
if(parseFloat(discount_price_element.innerHTML) == parseFloat(price_element.innerHTML)){
discount_price_element.style.display = "none";
if (mq.matches) {
price_element.style.fontSize = "16px";
price_element.style.paddingTop = "15px";
} else {
price_element.style.fontSize = "20px";
}
price_element.style.fontWeight = "700";
} else {
price_element.style.textDecoration = "line-through";
price_element.style.paddingLeft = "10px";
}
}
Is there anything I can do to make both codes work together? I've tried putting them in the same function, with no luck.
Here is the HTML(I guess the only relevant code here is the .price-box div, but I'm gonna paste everything in case you need it):
<div>
<div class="dy-sliding-drawer-container" data-dy-strategy-container="">
<div class="dy-sliding-handle">
<div class="dy-sliding-handle-text">
${Title}
</div>
</div>
<div class="dy-sliding-items-container dy-open">
${#Recommendation}
<a href="${Item Link}" class="dy-rv-rcom-item">
<div class="dy-rv-rcom-item-image-container item-${SKU}" style=" background-image: url(${Item Image}); background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;min-height: 50px;
min-width: 50px;">
</div>
<div class="dy-rv-rcom-item-name">${Item Name}</div>
<div class="dy-rv-rcom-item-price">
<div class="price-box">
<span class="dynamic-price">${product_price_dynamic},-</span>
<span class="regular-price">${price},-</span>
</div>
</div>
<!-- button -->
<div class="product-item-actions add-to-cart-button-dy">
<div class="actions-primary">
<form data-role="tocart-form" action="https://www.norli.no/checkout/cart/add/uenc/${uenc}/product/${product_id}/" method="post">
<input type="hidden" name="product" value="${product_id}" tabindex="0">
<input type="hidden" name="uenc" value="${uenc}" tabindex="0">
<input name="form_key" type="hidden" value="${formkey}" tabindex="0">
<button type="submit" title="Handlekurv" class="action tocart primary" tabindex="0">
<span class="tocart--short">Legg til</span>
</button>
</form>
</div>
</div>
<div class="product actions product-item-actions read-more-button-dy" style="display: none !important;">
<div class="actions-primary">
<div class="fieldset">
<div class="actions">
<span class="out-of-stock-view-more lesmer-button" style="color:#FFF; display: none !important;">Les mer</span>
</div>
</div>
</div>
</div>
<!-- button end -->
</a>
${/Recommendation}
</div>
</div>
</div>
And if the CSS is needed, heres is the CSS for the relevant classes(old price and new price:
.price-box{
display: flex;
align-items: flex-end;
}
.dynamic-price{
color:#dd1768;
font-size:18px;
font-weight:700;
letter-spacing:-1.5px !important;
padding-bottom:0px !important;
margin-bottom:0px !important;
}
.regular-price{
font-size:14px;
letter-spacing:-1px !important;
padding-bottom:0px !important;
margin-bottom:0px !important;
font-weight: 400;
}
Could anybody help me out? Keep in mind that the Javascript works fine for recommendation widgets which loads on-page, but not with this click-to-open drawer. Appreciate any help.
Your script does basically work - provided the variables in your template have been
replaced by actual values before the markup is rendered into the DOM. I have modified your data a little bit to demonstrate the correct behaviour on some same-price and some differing-price .price-box examples.
I also took the liberty of shortening your very verbose scripts. I have probably gone a bit too far, especially my .reduce() construct is not easy to read. But look at it as an extreme way of avoiding creating variable names.
(function(){
var container = document.querySelector('.dy-sliding-drawer-container');
container.querySelector('.dy-sliding-handle').onclick=e=>
container.classList.toggle("dy-open");
})();
// var mq = window.matchMedia( "(max-width: 599px)" );
document.querySelectorAll('.price-box').forEach(p=>{
[...p.querySelectorAll("span")].reduce((a,c)=>a.style.display=(a.textContent==c.textContent?"none":""))});
.dy-open {background-color:yellow}
.price-box{
display: flex;
align-items: flex-end;
}
.dynamic-price{
color:#dd1768;
font-size:18px;
font-weight:700;
letter-spacing:-1.5px !important;
padding-bottom:0px !important;
margin-bottom:0px !important;
}
.regular-price{
font-size:14px;
letter-spacing:-1px !important;
padding-bottom:0px !important;
margin-bottom:0px !important;
font-weight: 400;
}
<div>
<div class="dy-sliding-drawer-container" data-dy-strategy-container="">
<div class="dy-sliding-handle">
<div class="dy-sliding-handle-text">
${Title}
</div>
</div>
<div class="dy-sliding-items-container">
${#Recommendation}
<a href="#${Item Link}" class="dy-rv-rcom-item">
<div class="dy-rv-rcom-item-image-container item-${SKU}" style=" background-image: url(${Item Image}); background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;min-height: 50px;
min-width: 50px;">
</div>
<div class="dy-rv-rcom-item-name">${Item Name}</div>
<div class="dy-rv-rcom-item-price">
<div class="price-box">
<span class="dynamic-price">50,-</span>
<span class="regular-price">50,-</span>
</div>
</div>
<div class="dy-rv-rcom-item-name">${Item Name}</div>
<div class="dy-rv-rcom-item-price">
<div class="price-box">
<span class="dynamic-price">50,-</span>
<span class="regular-price">60,-</span>
</div>
</div>
<div class="dy-rv-rcom-item-name">${Item Name}</div>
<div class="dy-rv-rcom-item-price">
<div class="price-box">
<span class="dynamic-price">60,-</span>
<span class="regular-price">60,-</span>
</div>
</div>
<!-- button -->
<div class="product-item-actions add-to-cart-button-dy">
<div class="actions-primary">
<form data-role="tocart-form" action="https://www.norli.no/checkout/cart/add/uenc/${uenc}/product/${product_id}/" method="post">
<input type="hidden" name="product" value="${product_id}" tabindex="0">
<input type="hidden" name="uenc" value="${uenc}" tabindex="0">
<input name="form_key" type="hidden" value="${formkey}" tabindex="0">
<button type="submit" title="Handlekurv" class="action tocart primary" tabindex="0">
<span class="tocart--short">Legg til</span>
</button>
</form>
</div>
</div>
<div class="product actions product-item-actions read-more-button-dy" style="display: none !important;">
<div class="actions-primary">
<div class="fieldset">
<div class="actions">
<span class="out-of-stock-view-more lesmer-button" style="color:#FFF; display: none !important;">Les mer</span>
</div>
</div>
</div>
</div>
<!-- button end -->
</a>
${/Recommendation}
</div>
</div>
</div>
Explanation:
The .reduce() over all the <span>s in a .price-box div relies on the fact that the "reduced price" span always comes before the "regular price" one and that you will always have exactly two elements. When reduce() is called without the second (starting value) argument it takes the first array element (the "reduced price" span) as the starting value (a). The (only) "current" value in the iteration (c) will then be the regular price span. When the .textContent of both elements are the same the a span will be hidden, otherwise it will remain visible.
I wanted to make a div, and on hover on that div the contnet in the div must be scrolled to bottom, i have done the following code but its not working as desired, at the first hover it directly goes to bottom of the div height and on second hover the trasition works properly
.komal {
overflow: hidden;
height: 212px;
position: relative;
}
.imgpos {
position: absolute;
transition: all 1s ease-out 0s;
}
<div class="col-12 col-lg-4" id="outgov" style="height: auto;">
<div class="card card-shadowed card-hover-shadow komal dhiraj">
<div class="card-block text-center imgpos">
<img src="assets/home_solutions/outsourcing-governance.png" width="30%" style="margin-bottom: 20px;">
<h2 class="card-title text-center">Outsourcing Governance</h2>
<hr class="hr">
<div class="row" id="outgov_hidden" style="background-color: white; z-index: 9; margin-left:-20px; padding-bottom: 20px;">
<div class="text-center"><br>
<h4 class="modal-title" style="color: #000">Outsourcing Governance Practice Made Easy</h4>
<a style="margin-bottom:5px;" class="btn btn-info" href="#">Learn More</a>
<br><br>
</div>
</div>
</div>
</div>
</div>
$(document).ready(function () {
var xH
$('.dhiraj').hover(
function () {
xH = $(this).children(".imgpos").css("height");
xH = parseInt(xH);
xH = xH - 280;
xH = "-" + xH + "px";
$(this).children(".imgpos").css("top", xH);
}, function () {
$(this).children(".imgpos").css("top", "0px");
});
});
I want it to be working properly so please help that what can be done to make it work properly and look good
You can check the live demo on following link: http://sequentia.xyz/demo/demo
I want to make it (desired)like: http://domo.com (A solution for every role section on homepage of given desired link)
Please help me working it as desired like domo with my current color scheme
You would have to specify the top value. Otherwise, CSS Transition would not know from what value to transition.
In short, edit your code with this:
.imgpos {
top: 0px;
position: absolute;
transition: all 1s ease-out 0s;
}
If more explanation required, please do mention.
Not completely sure how to explain what's going on. I'm trying to do a transformation on my search bar after it's submitted. The CSS and HTML are pretty large so I'm linking to CodePen to see in action, but I'll post the JS/CSS here as well.
I'd like to do something 'fancy' with the search bar, while the results pop up on the same screen so I thought 'transitions'.
CSS
.postSearch{
-webkit-transition: all 3s ease;
-webkit-transform: rotate(1440deg);
-moz-transition: all 3s ease;
-moz-transform: rotate(1440deg);
margin-left: 80%;
}
HTML Form
<div class="revolver">
<form id="myForm">
<p class="inp-wrap search-wrap">
<label for="charName" class="search-label grid-25">Find</label>
<input type="search" name="charName" id="charName" class="grid-75" placeholder="e.g. Teodoro" />
</p>
<p class="inp-wrap cat-wrap">
<label for="servers" class="grid-20">on</label>
<select name="servers" id="servers" class="grid-80">
<option>Thrall</option>
</select>
</p>
<p class="inp-wrap submit-wrap">
<button class="grid-100 btn" name="SubmitButton" onclick="updateTransition()" type="button">
<span class="search-icon-container">
<i class="fa fa-search" aria-hidden="true"></i>
</span> GO!
</button>
</p>
</form>
</div>
JS
function updateTransition() {
var el = document.querySelector("div.revolver");
if (el) {
$('#myForm').addClass('postponed');
$('#myForm').removeClass('myForm');
el.className = "postSearch";
} else {
$('#myForm').addClass('myForm');
$('#myForm').removeClass('postponed');
el = document.querySelector("div.postSearch");
el.className = "revolver";
}
};
There is a lot more to this page in production which is why some of the IDs etc don't make sure. I feel like using 'toggleClass' is a better idea for the myForm/postponed swap also. (I do this so hitting 'Go' again doesn't re-submit the form.
The codepen is located here - If you notice when you hit 'go' you'll see a scroll bar periodically pop up. On smaller resolutions it happens, on 4K it happens. On the website it actually is causing the background image to 'shake' and snap around.
I'm not too familiar with transitions, but I followed the documents pretty specifically. I'll end up inverting it to get the search bar to go back since it kind of 'snaps' back right now. Would appreciate any advice.
Thanks.
It is because of the component is going out from document. Try by adding overflow: hidden to it's parent container. Please try this and let me know if this is helpful for you.
function updateTransition() {
var el = document.querySelector("div.revolver");
if (el) {
$('#myForm').addClass('postponed');
$('#myForm').removeClass('myForm');
el.className = "postSearch";
} else {
$('#myForm').addClass('myForm');
$('#myForm').removeClass('postponed');
el = document.querySelector("div.postSearch");
el.className = "revolver";
}
};
html,
body {
position: relative;
height: 100%;
margin: 0;
/* temporary class */
}
.overflow-hidden {
overflow: hidden;
position: relative;
min-height: 100%;
}
.postSearch {
-webkit-transition: all 3s ease;
-webkit-transform: rotate(1440deg);
-moz-transition: all 3s ease;
-moz-transform: rotate(1440deg);
margin-left: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overflow-hidden">
<div class="revolver">
<form id="myForm">
<p class="inp-wrap search-wrap">
<label for="charName" class="search-label grid-25">Find</label>
<input type="search" name="charName" id="charName" class="grid-75" placeholder="e.g. Teodoro" />
</p>
<p class="inp-wrap cat-wrap">
<label for="servers" class="grid-20">on</label>
<select name="servers" id="servers" class="grid-80">
<option>Thrall</option>
</select>
</p>
<p class="inp-wrap submit-wrap">
<button class="grid-100 btn" name="SubmitButton" onclick="updateTransition()" type="button">
<span class="search-icon-container">
<i class="fa fa-search" aria-hidden="true"></i>
</span> GO!
</button>
</p>
</form>
</div>
</div>
Scroll occurs because while form is spinning it goes out parent.
One possible solution is to add overflow: hidden for the time of animation.
body.transitionActive{
overflow: hidden;
}
js
[...]
$('#myForm').addClass('postponed');
$('body').addClass('transitionActive');
setTimeout(function(){
$('body').removeClass('transitionActive');
}, 3000);
$('#myForm').removeClass('myForm');
[...]
See how it works here: http://codepen.io/anon/pen/ALNLak
I'm using jQuery panzoom to zoom an image and some div elements. This works generally but the elements positioned on top of the image don't stay in their original locations. Is there anyway to keep the div elements where they were whilst being scaled?
JSFiddle: https://jsfiddle.net/828wu2dy/
HTML:
<section id="inverted-contain">
<div class="panzoom-elements">
<div class="item item1">ITEM 1</div>
<div class="item item2">ITEM 2</div>
<div class="panzoom">
<img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg">
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
<button class="reset">Reset</button>
</div>
</section>
JS:
(function() {
var $section = $('#inverted-contain');
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
$set: $section.find('.panzoom-elements > div'),
startTransform: 'scale(0)',
increment: 0.1,
minScale: 1,
maxScale: 2,
contain: 'invert'
}).panzoom('zoom');
})();
CSS:
.panzoom-elements {
width: 50%;
height: 400px;
}
.item {
position: absolute;
z-index: 10;
}
.item.item1 {
color: white;
background: black;
width:50px;
height:50px;
top: 300px;
left: 100px;
}
.item.item2 {
color: white;
background: black;
width:50px;
height:50px;
top: 200px;
left: 150px;
}
The other problem is that it also doesn't drag horizontally.
I've tried everything I can think of.
Part 1:
To fix your 'item' problem - try putting 'item' elements on one level with 'img' - I mean put them inside div class='panzoom'.
Works for me. ^ ^
<section id="inverted-contain">
<div class="panzoom-elements">
<div class="panzoom">
<div class="item item1">ITEM 1</div>
<div class="item item2">ITEM 2</div>
<img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg">
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
<button class="reset">Reset</button>
</div>
</section>
The method of thought that led me to this answer: while learning panzoom documentation for API, and examining your fiddle, I found that 'img' or anything that could be seen as direct selector to it (I mean like $('.panzoom').child().first() is nowhere mentioned in your script. That means that most probably img is zooming in/out not by itself. What I thought next - it seem that it's parent is changing. That would mean that you need to put your items inside of that changing space - it is the most logical way to handle it... I tried to test that idea - and it worked.
Part 2:
The other problem is that it also doesn't drag horizontally.
Add this to your CSS
.panzoom{ width: 1920px;}
This is the size of the image. Works for me.
Perhaps you also could add to .panzoom height of image. It is not required in your case where image is horisontal but it could matter when image is vertical.
I dont know why but when I try to use hover event on CSS and Jquery .css for some reason it will not update the text. My plan is to make one of those slide show that you see text on the picture and on hover more text will show up.I need the background because of the pictures color and I dont want to make it big and on hover it will show text I want it to start from small. I dont care if its made by Jquery CSS or whatever.My end goal will be also to animate it as far as I know with Jquery it easiest but I can also do CSS
$("#ShortText").css({
fontSize:screen.height*.015,
//right: screen.width * .18,
//top: screen.height * .585,
width:screen.width * .6,
right: screen.width * .2,
top:screen.height*.65
});
#ShortText{
background-color: rgba(0, 0, 0,.6);
}
#Hide{
display:none
}
#ShortText:hover{
background:blue;
background-size:100% 100%;
position:absolute;
}
#First:hover + #Hovered1{
display:block
}
body{
color:white
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ShortText">
<div>
<h1 id="First">1</h1>
<p id="Hovered1">Hoverd </p>
</div>
<div>
<h1 id="Second">2</h1>
<p id="Hovered2">Hoverd </p>
</div>
<div>
<h1 id="Third">3</h1>
<p id="Hovered3">Hoverd </p>
</div>
</div>
If you are using top and right you need position: absolute:
$("#ShortText").css({
fontSize:screen.height*.015,
right: screen.width * .18,
top: screen.height * .585,
width:screen.width * .6
});
#ShortText{
background-color: rgba(0, 0, 0,.6);
}
#Hide{
display:none
}
#ShortText:hover{
background:blue;
background-size:100% 100%;
position: absolute;
}
#First:hover + #Hovered1{
display:block
}
body{
color:white
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ShortText">
<div >
<h1 id="First">1</h1>
</div>
<div>
<h1 id="Second">2</h1>
</div>
<div>
<h1 id="Third">3</h1>
</div>
</div>
<div id="Hide">
<p id="Hovered1">Hoverd </p>
<p id="Hovered2">Hoverd </p>
<p id="Hovered3">Hoverd </p>
</div>
Your Issue Updated
The #First:hover + #Hovered1 will select nothing because the #Hovered1 is not an immediate sibling of the #First.
#Hide is always hidden, so if you are trying to show something inside it, the parent is still hidden, so are the children.
Change your approach totally.