How to simulate click on another HTML element?

Question

In this image below it is normal now, but every time I pass the mouse over it is placed the element figcaption in the image, that figcaption I used to paint the picture black.

Here, the image before I move the mouse with your $('img')

After I pass the mouse over she gets one figcaption over her, because I used that figcaption to paint in black.

Image with the $('figcaption') active.

My question is: How can I click on the image and select the $('img')?

I don’t want to select the figcaption which is on top of the image, because with it I won’t be able to open my photo box.

$('img').bind('click',function() { $(this).$('caixabox').show('slow') } 
);

Answer 1

Suggestion, the image should be darkened even, or it could be lightened?

A very easy option is to use the opacity of css, example:

<img src='suaimagem.jpg' class='altera-opacidade' >

there in the css file

.altera-opacidade{
    opacity: 0.5;  //sem o mouse em cima fica clarinha
    //filter:grayscale(100%); se quiser testar preto e branco
    //filter:blur(5px); //se quiser testar embaçado
}
.altera-opacidade:hover{
    opacity: 1.0  //com o mouse em cima fica normal e nao atrapalha o que voce quer fazer
    //filter:grayscale(0); //volta a cor
    //filter:blur(0px); //volta a nitidez
}

still suggest testing other effects, with Blur instead of opacity, personally I think it gets even more beautiful. Then, of course, in my example, you will no longer use the figcaption. Good luck!

Answer 2

It gets easier with your code, but I can tell you that if you put in your CSS pointing to yours figcaption the following CSS: pointer-events: none;, do as you wish. Your figcaption will not have mouse events, and instead, the click will go straight to the back element.

Example:

figcaption {
    pointer-events: none;
}

div {
	position: relative;
	display: block;
	width: 367px;
	height: 314px;
}

figcaption {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	width: 367px;
	height: 314px;
	background: rgba(0,0,0,0.2);
	pointer-events: none;
}

div:hover figcaption {
	display: block;
}

<div>
  <a href="#"><img src="https://i.stack.imgur.com/ZYtPu.png" /></a>
  <figcaption></figcaption>
</div>

EDIT:

As remembered by @Brunnovianna, pointer-events will not work in IE versions below IE11.

Answer 3

It would be good to provide the structure of html so we can better understand how to do it. But if you are using the "default" structure for tags <img> and <figcaption> (that is, whereas the $('figcaption') is at the same level as the image):

$('figcaption').on("click", function(e){
    e.preventDefault();
    e.stopPropagation();

    $(this).siblings("img").click();
});

The structure would need to look something like this:

<figure>
    <img src="imagem.jpg">
    <figcaption>Figcaption</figcaption>
</figure>

If that mark is NOT similar to yours, post the mark and edit the answer.