Develop Reference

Is there a way to make an element dependent on another element?

I am making a portfolio website and having trouble with something. When I hover over an image of a project, the image grows in size, has reduced opacity and a description of the project appears. However, I want to be able to add a link with the description. The problem is when I hover over the link the image returns to it's default state, meaning the image shrinks back, is opaque and the description fades away along with the link.
I have tried restructuring the javascript and css around but haven't gotten any solutions.
JavaScript:
const projectNode = (project) => {
return (
<div className="Project">
<div>
<div className="previewProject">
<img className="Project-image" src={project.image} alt="project-images" />
<div className="Project-info" >{project.description}<br></br>
<a className="project-link" href={project.github}>GITHUB</a>
</div>
</div>
</div>
</div>
)
}
//CSS//
.previewProject {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.Project-image {
opacity: 1.0;
filter: alpha(opacity=40);
transition: transform .3s;
border: solid 3.5px #606060;
/* Animation */
margin: 50px auto;
position: relative;
top: 0;
left: 0;
}
.Project-image+.Project-info {
opacity: 0;
transition: opacity 0.3s;
}
.Project-image:hover {
opacity: 0.2;
filter: alpha(opacity=100);
transform: scale(1.25);
}
.Project-image:hover+.Project-info {
opacity: 1;
color: black;
}
.Project-info {
font-family: 'Lato', sans-serif;
font-size: 21px;
width: 25%;
position: absolute;
pointer-events: none;
}
.project-link {
pointer-events: auto;
}

Your animation should relate to hovering on the parent .previewProject, so something like this:
.previewProject:hover .Project-image {
/* Do whatever */
}

Change transition-duration with add/removeClass

I'm trying to make a simple pen with a button. When "on" is pressed the cover should slide and cover "on". When "off" is pressed the cover should cover "off". It works the way I have it, but when I try to add some transition effects nothing works. I tried adding transition-duration: 1s; to every class in the project but no luck.
Here's my codepen.
https://codepen.io/Alex-Iron/pen/eMORVV
My code is this:
HTML
<div id="switch" class="silver-background">
<div id="wrapper">
<div class="silver-background" id="cover">
<div id="cover-inner"></div>
</div>
<div id="on" class="on-left">on</div>
<div id="off">off</div>
</div>
</div>
SCSS
$radius: 7px;
$height: 100px;
$width: $height*1.5;
#switch{
width: $width*2.1;
height: $height*1.2;
display: grid;
position: relative;
}
.silver-background{
border-radius: $radius;
background: silver;
}
#wrapper{
margin: auto;
display: flex;
}
#on, #off, #cover, #cover-inner{
font-size: $height/3;
height: $height;
width: $width;
line-height: $height;
text-align: center;
text-transform: uppercase;
font-family: sans-serif;
}
#on{
background: radial-gradient(green, green, black);
border-radius: $radius 0 0 $radius;
color: lightgreen;
}
#off{
background: radial-gradient(#A00000, #A00000, black);
border-radius: 0 $radius $radius 0;
color: #EC6666*1.3;
}
#cover{
position: absolute;
border: 1px solid black;
width: $width*2.1/2;
height: $height*1.2;
display: grid;
top: 0;
}
#cover-inner{
width: $width*0.9;
background-color: white;
border-radius: $radius;
margin: auto;
}
.on-left{
left: 0;
}
.on-right{
right: 0;
}
My jQuery code.
$("#off").on('click',()=>{
$('#cover').removeClass('on-left');
$('#cover').addClass('on-right');
});
$('#on').on('click',()=>{
$('#cover').removeClass('on-right');
$('#cover').addClass('on-left');
})

I've updated your pen:
https://codepen.io/anon/pen/geOpgz
You should use the transition property of css:
#cover{
...
left: 0;
transition: 1s left;
}
The transition property can be used to animate a property value change. It is important, that your class only changes a property value f.e. left and not switches from left: 0 to right: 0:
#cover.on-left{
left: 0;
}
#cover.on-right{
left: $width;
}
In your case, the new value of your left property on right position is left: $width*2.1 / 2 cause your wrapper has the following width: width: $width*2.1.
By the way, i yould suggest you to use the toggleClass function of jquery:
$("#wrapper").on('click',()=>{
$('#cover').toggleClass('on-right');
});
Now you can click your wrapper on any position and it toggles the "on" and "off" with only one class .on-right and less javascript code:
https://codepen.io/anon/pen/QmWjwb

Your id="cover" should have on-left from start, and then give that #cover property transition: left 0.2s ease and class .on-right should have left: 150px since you cant transition from left: 0 to right: 0.
Here is the updated pen: https://codepen.io/zmuci/pen/JLjdEb

How could I Cange trigger from input[type="file"] to a span tag?

I wanna click on my Styled span tag, and open the upload file window, that's what my input[type="file"] do.
PS: I can't change my HTML code.
I got this code from this other question: Link
But I'm not understanding this part(and my code is all not working :c)
$('input.inputFile').on('change', function() {
var val = $(this).val();
$(this).siblings('span').text(val);
})
Here is what I've tried:
$("span.Anexo input").addClass('inputFile');
$("span").click(function() {
$("input.inputFile'").trigger('click');
});
$('input.inputFile').on('change', function() {
var val = $(this).val();
$(this).siblings('span').text(val);
})
span.Anexo label{ display: none;}
input#fu89_1_14_0{display: none;}
span#formContato_ctl00_rptAba_rptSessao_0_rptCampos_0_ctl00_6 {
display: block !important;
width: 100%;
height: 70px;
border: 3px dotted #009997;
background-color:red;
padding: 0.5em 1.1em;
border-radius: 0;
-webkit-transition: border 500ms ease-out;
-moz-transition: border 500ms ease-out;
-o-transition: border 500ms ease-out;
transition: border 500ms ease-out;
margin-bottom: 10px;
}
span#formContato_ctl00_rptAba_rptSessao_0_rptCampos_0_ctl00_6:hover{border-color: white;}
span#formContato_ctl00_rptAba_rptSessao_0_rptCampos_0_ctl00_6:before {
background: url(someincon.svg) no-repeat;
content: 'Clique aqui para enviar o arquivo';
line-height: 3.2;
font-size: 1.2em;
text-align: left;
padding-left: 4em;
background-size: contain;
display: block;
width: 100%;
height: 100%;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Anexo">
<label>Anexo:</label>
<input type="file" name="ctl00$formContato$ctl00$rptAba$ctl00$rptSessao$ctl00$rptCampos$ctl06$fu89_1_14_0" id="fu89_1_14_0">
<span id="formContato_ctl00_rptAba_rptSessao_0_rptCampos_0_ctl00_6">
</span>
</span>

There are multiple spans which are having the same class. so it is giving an error.
Replace your Code with This script. it will open a file dialog when you click on Anexo.
$("#Anexo").click(function() {
$("#fu89_1_14_0").trigger('click');
});
$('#fu89_1_14_0').on('change', function() {
var val = $(this).val();
$(this).siblings('span').text(val);
})
HTML Code
<span class="Anexo">
<span class="Anexo">
<label id="Anexo">Anexo:</label>
<input type="file" name="ctl00$formContato$ctl00$rptAba$ctl00$rptSessao$ctl00$rptCampos$ctl06$fu89_1_14_0" id="fu89_1_14_0">
<span id="formContato_ctl00_rptAba_rptSessao_0_rptCampos_0_ctl00_6" style="display:none;">
</span>
</span>

How to jquery hover an element that has display: none;

I got a slider which has a couple of anchor elements (with .rslides_nav.next & .rslides_nav.prev) to recreate arrows and allow user to navigate. I must make these arrows invisible until the user is on:hover on the slider. So I use display: none.
EDIT to put the solution: It is not possible to hover on an element that has display: none; better use visibility: hidden; as suggested in the accepted answer.
CSS:
.rslides_nav.next {
display: none;
}
.rslides_nav.prev {
display: none;
}
And then I add the class mostrar_navs via Jquery with:
$('#metaslider').hover(
function(){
$('.rslides_nav.next').addClass('mostrar_navs'),
$('.rslides_nav.prev').addClass('mostrar_navs')
},
function(){
$('.rslides_nav.next').removeClass('mostrar_navs'),
$('.rslides_nav.prev').removeClass('mostrar_navs')
}
);
And this css:
.mostrar_navs {
display: block !important;
}
Everything works fine until I hover the arrows (anchor). It starts to appear and disappear, so I used the following jquery.hover() which doesn't work:
$('.rslides_nav').hover(
function(){
$('.rslides_nav.next').addClass('mostrar_navs'),
$('.rslides_nav.prev').addClass('mostrar_navs')
},
function(){
$('.rslides_nav.next').removeClass('mostrar_navs'),
$('.rslides_nav.prev').removeClass('mostrar_navs')
}
);
Any idea to solve the problem?
EDIT TO ADD HTML:
<div id="metaslider_container_133">
<ul id="metaslider_133" class="rslides rslides1">
<li id="rslides1_s0" class="" style="display: block; float: none; position: absolute; opacity: 0; z-index: 1; transition: opacity 600ms ease-in-out;"><img src="http://micubo.kevinmamaqi.com/wp-content/uploads/2016/10/xSLIDER-01.02.jpg.pagespeed.ic.dIb-wgR5PQ.webp" height="700" width="1600" alt="" class="slider-133 slide-164"></li>
<li style="float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; transition: opacity 600ms ease-in-out;" id="rslides1_s1" class=""><img src="http://micubo.kevinmamaqi.com/wp-content/uploads/2016/10/xSLIDER-02.02.jpg.pagespeed.ic.r1uBWZHLRw.webp" height="700" width="1600" alt="" class="slider-133 slide-167"></li>
<li style="float: left; position: relative; opacity: 1; z-index: 2; display: list-item; transition: opacity 600ms ease-in-out;" id="rslides1_s2" class="rslides1_on"><img src="http://micubo.kevinmamaqi.com/wp-content/uploads/2016/10/xSLIDER-03.02.jpg.pagespeed.ic.obhEqWfXEJ.webp" height="700" width="1600" alt="" class="slider-133 slide-168"></li>
</ul>
<
>
</div>

//On hover tag hide img1 and show img2
.img2 {
display:none;
}
.img1:hover + .img2 {
transition-duration:0s;
display: block;
}

Make object invisible doesn't mean put them
display: none;
Try with it
visibility: hidden;

mouseover event to control fadeto

I'm trying to cause an image to fadeTo to a particular opacity but triggered when the mouseover (mouseenter, mouseleave) is on the parent div.
The code below shows two div elements (working fine) but for some reason it doesn't work when i change ".children("div")" to ".children("img")" given that I actually have an image in there of course.
Is there some syntax or naming convention I'm missing?
$(document).ready(function(){
$(".title").mouseenter(function(){
$(this).children("img").fadeTo("fast", 0.8);
});
$(".title").mouseleave(function(){
$(this).children("img").fadeTo("fast", 1.0);
});
});
.wrap {
width: auto;
margin-left: 2%;
margin-right: 2%;
padding-left: 2%;
padding-right: 2%;
float: none;
}
.title {
border: 1px solid #C1C1C1;
background: #000;
cursor: pointer;
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: ease;
transition-delay: 0;
margin-bottom: 0px;
position: relative;
margin-top: 40px;
}
img {
height: 100px;
width: 100px;
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<div class="fluid wrap" ontouchstart="">
<div class="title">
<img src="https://inkplant.com/images/code/red-box.jpg"/>
</div>
</div>

You don't mention where the image is, but I think you want:
$(document).ready(function(){
$(".title").mouseenter(function(){
$(this).find("img").fadeTo("fast", 0.8);
});
$(".title").mouseleave(function(){
$(this).find("img").fadeTo("fast", 1.0);
});
});
This is because
.children
only affects direct descendants of your target element.
.find
will find any element that is a child of the target node

you have a syntax error with </div> after your <img> its a wrong typo I think
if your img with class box use
$(this).find(".box")
instead of
$(this).children("div")
if your img not have any class just use
$(this).find("img")