How to simulate click another HTML element?

Question

How to simulate click another HTML element?

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

1

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

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

AfterIhoverthemouseoverititgetsafigcaptionoverit,becauseIusedthisfigcaptiontopaintinblack.

Imagewith$('figcaption')active.

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

I do not want to select the figcaption that is above the image, because with it I will not be able to open my picture box.

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

jquery css

asked by anonymous 04.09.2017 / 14:56

3 answers

Pagination ordered by ID Simultaneous access

score 0 · Answer 1

It gets easier with your code, but I can tell you that if you put in your CSS pointing to your figcaption the following CSS: pointer-events: none; , it will do as you want. Your figcaption will not have mouse events, and instead, the click will go right 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 reminded by @BrunnoVianna, pointer-events will not work in IE versions below IE11.

score 0 · Answer 2

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

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

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

The structure would look like this:

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

If this tag is NOT similar to yours, post the tag and edit the reply.

score 0 · Answer 3

Suggestion, should the image be darkened at all, or could it be cleared?

A very easy option is to use the css opacity, for 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, I personally think it looks even prettier. There, of course, in my example, you will no longer use figcaption . Good luck!