2
\$\begingroup\$

I have some very illogical jQuery code and I want to see if someone finds a better way to do the exact same thing:

jQuery:

$(".col-md-3 img").hover(function() {
		$(this).parent().children(".search").show();
		$(this).parent().children(".photo").css("opacity","0.4");
	}, function(){
		$(this).parent().children(".search").hide();
		$(this).parent().children(".photo").css("opacity","1");
	});
html {
	background-color: #3498db;
}

.photo {
	width:100%;
	height: auto;
	margin: 20px 0px;
}

.search {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	top:40%;
	left: 0;
	right: 0;
	display: none;
}

.search:hover{
	cursor:pointer;
}
<div class="col-md-3">
  <img class="photo" src="http://florin-pop.com/work/Photo%20Gallery/img/1_small.jpg" alt="img" />
  <img class="search hidden-xs" src="http://florin-pop.com/work/Photo%20Gallery/img/search.png" width="50px"/> 
</div>

<!-- snippet jquery include -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

I have multiple similar divs.

I don't like the fact that I am accessing the DOM many times with:

$(this).parent().children();

I'm going back and forth and I think it might be a better solution.

The problem with the siblings() method is that one image is on top of the other image, with position absolute and this causes some tricky hover issues. The live website here: live

\$\endgroup\$
3
  • \$\begingroup\$ I took the liberty to edit your question to use snippets. Feel free to roll back that edit if you feel it's incorrect or if the jQuery version is not correct \$\endgroup\$ – Vogel612 Jun 29 '15 at 19:55
  • \$\begingroup\$ Can you just do $(".search").show() etc without the whole $(this).parent().children(...) thing? Or, are there other elements of that class that you do not wan't accessed at that time? \$\endgroup\$ – SirPython Jun 29 '15 at 21:37
  • \$\begingroup\$ Is it expected behaviour that both are shown at first? Or is there CSS that's on your site but not in the snippet which will hide the "main" image until hover? \$\endgroup\$ – Greg Pettit Jul 3 '15 at 17:41
2
\$\begingroup\$

Semantic markup

The search.png image is an artifact of the presentation; it isn't really part of the content. Therefore, it should not be written in the HTML.

Too much jQuery

This hover effect can be achieved using just CSS, and therefore it should be done in pure CSS.

html {
    background-color: #3498db;
}

.col-md-3 {
    width: 25%;
}

.photo {
    position: relative;
    width: 100%;
    margin: 20px 0px;
}
.photo img {
    width: 100%;
}

.photo:hover img {
    opacity: 0.4;
}
.photo:hover::after {
    position: absolute;
    top: 0%;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(http://florin-pop.com/work/Photo%20Gallery/img/search.png) 50% 50% no-repeat;
    background-size: 50px 50px;
    content: '';
    cursor: pointer;
}
<div class="col-md-3">
  <div class="photo"><img src="http://florin-pop.com/work/Photo%20Gallery/img/1_small.jpg" alt="" /></div>
</div>

I've used full URLs and background-image scaling for this demo. For your real site, you should use relative URLs and a pre-scaled magnifying glass image.

\$\endgroup\$
4
\$\begingroup\$

Instead of

 $(this).parent().children(".search").show();

you can use

$(this).siblings(".search").show();
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.