Luiz Luiz - 9 days ago 5
CSS Question

Highlight a text when clicking in another text

Explanation



I'm working on this template which uses MixItUp plugin in it.
Basically, I have one simple, but difficult (at least for me, because I'm new to web dev) doubt that I'm trying to solve without success: I'd like to highlight (as it highlights green when clicking in it) the "filter tab" (All, Mix1, Mix2...) when clicking on the text (Mix1, Mix2...) that appears when hovering each image.




Code





$(document).ready(function() {

/* ========================================================================= */
/* Filtering
/* ========================================================================= */

$(".project-wrapper").mixItUp();

});

/*=========================================
Basic Style
==========================================*/

body {
line-height: 21px;
font-size: 13px;
}

ol, ul {
margin: 0;
padding: 0;
list-style: none;
}

a, a:focus, a:hover {
text-decoration: none;
}

body>section, .footer {
padding: 70px 0;
}


/*=========================================
Mix
==========================================*/

.work-filter {
margin-bottom: 35px;
}

.work-filter ul li {
display: inline-block;
}

.work-filter ul li a {
color: #062033;
display: block;
padding: 5px 17px;
}

.work-filter ul li a:hover, .work-filter ul li a.active {
background-color: rgba(31, 107, 76, 1);
color: #fff;

}

.mix {
display: none;
}

.project-wrapper {
text-align: center;
}

.work-item {
float: none;
width: 30%;
position: relative;
}

.work-item>img {
display: block;
height: 100%;
width: 100%;
}

.overlay {
background-color: rgba(31, 107, 76, .9);
text-align: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #fff;
opacity: 0;
}

.work-item:hover .overlay {
opacity: 1;
}

.work-item .overlay a {
font-size: 30px;
display: inline-block;
margin-top: 34%
}

.work-item .overlay a:hover {
color: #fff;
}



/*=========================================
Media Queries
==========================================*/



/*============================================================
For Small Desktop
==============================================================*/

@media (min-width: 980px) and (max-width: 1150px) {

/* work */

}


/*============================================================
Tablet (Portrait) Design for a width of 768px
==============================================================*/

@media (min-width: 768px) and (max-width: 979px) {

/* work */

.work-item {
float: left;
width: 33%;
}

}


/*============================================================
Mobile (Portrait) Design for a width of 320px
==============================================================*/

@media only screen and (max-width: 767px) {

/* work */

.work-item {
float: left;
left: 5% !important;
width: 90%;
}

}


/*============================================================
Mobile (Landscape) Design for a width of 480px
==============================================================*/

@media only screen and (min-width: 480px) and (max-width: 767px) {

/* work */

.work-item {
left: inherit !important;
width: 50%;
}

}

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
<!-- meta charec set -->
<meta charset="utf-8">
<!-- Page Title -->
<title>MixItUp</title>

<!--=========================================
CSS
=========================================-->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/main.css">


<!--=========================================
Essential jQuery Plugins
=========================================-->
<!-- Main jQuery -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- jquery.mixitup.min -->
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<!-- Custom Functions -->
<script src="js/custom.js"></script>
</head>

<body id="body">

<section>
<div class="container">
<div class="row">

<div class="work-filter">
<ul class="text-center">
<li><a href="javascript:;" data-filter="all" class="active filter">All</a></li>
<li><a href="javascript:;" data-filter=".mix1" class="filter">Mix1</a></li>
<li><a href="javascript:;" data-filter=".mix2" class="filter">Mix2</a></li>
<li><a href="javascript:;" data-filter=".mix3" class="filter">Mix3</a></li>
<li><a href="javascript:;" data-filter=".mix4" class="filter">Mix4</a></li>
<li><a href="javascript:;" data-filter=".mix5" class="filter">Mix5</a></li>
<li><a href="javascript:;" data-filter=".mix6" class="filter">Mix6</a></li>
</ul>
</div>

</div>
</div>

<div class="project-wrapper">

<figure class="mix work-item mix1">
<img src="http://imgur.com/KZfjrVT.jpg" alt="">
<figcaption class="overlay">
<a href="javascript:;" data-filter=".mix1" class="filter">Mix1</a>
</figcaption>
</figure>

<figure class="mix work-item mix2">
<img src="http://imgur.com/GB54YZR.jpg" alt="">
<figcaption class="overlay">
<a href="javascript:;" data-filter=".mix2" class="filter">Mix2</a>
</figcaption>
</figure>

<figure class="mix work-item mix3">
<img src="http://imgur.com/afatbzS.jpg" alt="">
<figcaption class="overlay">
<a href="javascript:;" data-filter=".mix3" class="filter">Mix3</a>
</figcaption>
</figure>

<figure class="mix work-item mix4">
<img src="http://imgur.com/GvjT75d.jpg" alt="">
<figcaption class="overlay">
<a href="javascript:;" data-filter=".mix4" class="filter">Mix4</a>
</figcaption>
</figure>

<figure class="mix work-item mix5">
<img src="http://imgur.com/KJ9MaK6.jpg" alt="">
<figcaption class="overlay">
<a href="javascript:;" data-filter=".mix5" class="filter">Mix5</a>
</figcaption>
</figure>

<figure class="mix work-item mix6">
<img src="http://imgur.com/w3ZFVnq.jpg" alt="">
<figcaption class="overlay">
<a href="javascript:;" data-filter=".mix6" class="filter">Mix6</a>
</figcaption>
</figure>

</div>

</section>

</body>

</html>





Thanks in advance,

Luiz.

Answer

You can achieve the desired like below.

Add the event on filter class and check for the element with the same data-filter attribute in the tab context.

$(document).ready(function() {

    /* ========================================================================= */
    /*	Filtering
    /* ========================================================================= */

    $(".project-wrapper").mixItUp();
  
    $(".filter").on("click",function()
    {
      var dFilter = $(this).attr("data-filter");
      
      var tabContext = $(".work-filter");
    
      $( "a[data-filter='"+dFilter+"']",tabContext ).addClass("active");

      
    })

});
/*=========================================
	Basic Style
==========================================*/

body {
    line-height: 21px;
    font-size: 13px;
}

ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a, a:focus, a:hover {
    text-decoration: none;
}

body>section, .footer {
    padding: 70px 0;
}


/*=========================================
	Mix
==========================================*/

.work-filter {
    margin-bottom: 35px;
}

.work-filter ul li {
    display: inline-block;
}

.work-filter ul li a {
    color: #062033;
    display: block;
    padding: 5px 17px;
}

.work-filter ul li a:hover, .work-filter ul li a.active {
    background-color: rgba(31, 107, 76, 1);
    color: #fff;

}

.mix {
    display: none;
}

.project-wrapper {
    text-align: center;
}

.work-item {
    float: none;
    width: 30%;
    position: relative;
}

.work-item>img {
    display: block;
    height: 100%;
    width: 100%;
}

.overlay {
    background-color: rgba(31, 107, 76, .9);
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    opacity: 0;
}

.work-item:hover .overlay {
    opacity: 1;
}

.work-item .overlay a {
    font-size: 30px;
    display: inline-block;
    margin-top: 34%
}

.work-item .overlay a:hover {
    color: #fff;
}



/*=========================================
	Media Queries
==========================================*/



/*============================================================
	For Small Desktop
==============================================================*/

@media (min-width: 980px) and (max-width: 1150px) {

/* work */

}


/*============================================================
	Tablet (Portrait) Design for a width of 768px
==============================================================*/

@media (min-width: 768px) and (max-width: 979px) {

/* work */

.work-item {
  float: left;
  width: 33%;
}

}


/*============================================================
	Mobile (Portrait) Design for a width of 320px
==============================================================*/

@media only screen and (max-width: 767px) {

/* work */

.work-item {
  float: left;
  left: 5% !important;
  width: 90%;
}

}


/*============================================================
	Mobile (Landscape) Design for a width of 480px
==============================================================*/

@media only screen and (min-width: 480px) and (max-width: 767px) {

/* work */

.work-item {
  left: inherit !important;
  width: 50%;
}

}
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <!-- meta charec set -->
    <meta charset="utf-8">
    <!-- Page Title -->
    <title>MixItUp</title>

    <!--=========================================
        CSS
        =========================================-->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="css/main.css">


    <!--=========================================
        Essential jQuery Plugins
        =========================================-->
    <!-- Main jQuery -->
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <!-- jquery.mixitup.min -->
    <script src="https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
    <!-- Custom Functions -->
    <script src="js/custom.js"></script>
</head>

<body id="body">

    <section>
        <div class="container">
            <div class="row">

                <div class="work-filter">
                    <ul class="text-center">
                        <li><a href="javascript:;" data-filter="all" class="active filter">All</a></li>
                        <li><a href="javascript:;" data-filter=".mix1" class="filter">Mix1</a></li>
                        <li><a href="javascript:;" data-filter=".mix2" class="filter">Mix2</a></li>
                        <li><a href="javascript:;" data-filter=".mix3" class="filter">Mix3</a></li>
                        <li><a href="javascript:;" data-filter=".mix4" class="filter">Mix4</a></li>
                        <li><a href="javascript:;" data-filter=".mix5" class="filter">Mix5</a></li>
                        <li><a href="javascript:;" data-filter=".mix6" class="filter">Mix6</a></li>
                    </ul>
                </div>

            </div>
        </div>

        <div class="project-wrapper">

            <figure class="mix work-item mix1">
                <img src="http://imgur.com/KZfjrVT.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix1" class="filter">Mix1</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix2">
                <img src="http://imgur.com/GB54YZR.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix2" class="filter">Mix2</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix3">
                <img src="http://imgur.com/afatbzS.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix3" class="filter">Mix3</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix4">
                <img src="http://imgur.com/GvjT75d.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix4" class="filter">Mix4</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix5">
                <img src="http://imgur.com/KJ9MaK6.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix5" class="filter">Mix5</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix6">
                <img src="http://imgur.com/w3ZFVnq.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix6" class="filter">Mix6</a>
                </figcaption>
            </figure>

        </div>

    </section>

</body>

</html>