jquery html django twitter-bootstrap-3 pythonanywhere

Which bootstrap column is the mouse hovering over?

I'm making a `django` website, where I have to change the color of text and make a box appears when hovering over their bootstrap column. The problem I'm having is trying to individually refer to the column to only highlight that column and not another.

The code:

$(document).ready(function() {
  $('.col-sm-2').hover(function() {
    if ($(this).attr('id') == $('.col-sm-2').children('.box').children('img').attr('alt')) {
      $(this).children('.box').css('border', '1px solid #aeaeae');
      $(this).children('.box').css('padding', '0px');
      $(this).children('.carinf').children('a').css('color', '#012190');
    }
  }, function() {
    $('.box').css('border', '0px');
    $('.box').css('padding', '1px');
    $('.shoeinf').children('a').css('color', 'black');
  });
});

.box {
  border-radius: 18px;
  font-size: 150%;
  padding: 1px;
  display: inline-block;
  box-sizing: border-box;
  height: auto;
  max-width: 100%;
  float: center;
}

.carinf {
  white-space: nowrap;
  text-align: center;
  text-overflow: string;
  max-width: 100%;
  position: relative;
}

.box:hover {
  padding: 0px;
  border: 1px solid #aeaeae;
}

img {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 2%;
}

a {
  color: black;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #012190;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <!--meant to be a for loop for django here -->
  <!--at start of for create row-->
  <div class="row">
    <a>
    <div class="col-sm-2" id="black , f-type , jaguar">
  
        <div class="box">
          <img src="https://via.placeholder.com/500" alt="black , f-type , jaguar" class="img-responsive"> <!-- img alt and col id changes for every loop but are always the same-->
        </div>
        <div class="carinf">
          <h1>BLACK</h1>
          <h3>JAGUAR F-TYPE</h3>
          <h4>2016</h4>
      
      </div>
    </div>
    </a>
    <a>
    <div class="col-sm-2" id="black , f-type , jaguar">
        <div class="box">
          <img src="https://via.placeholder.com/500" alt="black , f-type , jaguar" class="img-responsive"> <!-- img alt and col id changes for every loop but are always the same-->
        </div>
        <div class="carinf">
          <h1>BLACK</h1>
          <h3>JAGUAR F-TYPE</h3>
          <h4>2016</h4
      </div>
    </div>
    </a>
    <!--after six loops create new row-->
  </div>
  <div class="row">
    <!-- end final row -->
  </div>
  <!-- endfor -->
</div>

When you hover over the box, the text doesn't color and when hovering over the text, the box doesn't show up.

In the jQuery, it looks at whether the id of the column is the same as the image alt text. Then if they are the same change the color of the text and add the box. When not hovering change back the border and text.

I have been able to color the text and have the box show up at the same time but only if all other columns do it as well. You can do this by excluding the if statement in the jQuery.

EDIT: Changed the HTML as much as I could away from django, other parts are needed for id's so they might be useful to know.

EDIT 2: Moving the a tag to around the column fixes it for plain HTML, CSS and jQuery. But with the django on PythonAnywhere it's not working. So I'm now questioning if it's PythonAnywhere or my django code.

Solution

Some problems with your jQuery code:

1 - The if condition is not checking the column id against the image alt inside it:

$('.col-sm-2').children('.box').children('img').attr('alt')

The previous code selects all the elements that match those conditions, not just the element inside the column. So, when you get the alt attribute, it takes the attribute of the first element in the selection of elements.

2 - You are changing back the border and the text of all elements and not just the elements inside the column. When you hovering on the second column, you are also executing the handlerOut of the first one, so, the code of the first one is changing also the styles of the second.

$('.box').css('border', '0px');
$('.box').css('padding', '1px');
$('.shoeinf').children('a').css('color', 'black');

As I mentioned before, the previous lines select all the elements that match those conditions and not only the ones inside the column.

3 - Try to use more CSS instead of styling with jQuery, it will save you a lot of time.

Your django code creates the columns dynamically, so you need to run your code after the column creation or use an event with a delegation to add and remove the classes.

Look at the variation of your code:

$(document).ready(function() {

  //---Add a class to elements that need to work on hovering
  $('.col-sm-2').each(function() {
    var $col = $(this);
    if ( $col.attr('id') === $col.find('.box img').attr("alt") ) {
      $col.addClass("active-col");
    }
  });

});

.box {
  border-radius: 18px;
  font-size: 150%;
  padding: 1px;
  display: inline-block;
  box-sizing: border-box;
  height: auto;
  max-width: 100%;
  float: center;
}

.carinf {
  white-space: nowrap;
  text-align: center;
  max-width: 100%;
  position: relative;
}

.carinf * {
  font-size: 16px;
}

img {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 2%;
}

.col-sm-2.active-col:hover .box {
  border: 1px solid #AEAEAE;
  padding: 0px;
}

.col-sm-2.active-col:hover .carinf * {
  color: #012190;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <!--meant to be a for loop for django here -->
  <!--at start of for create row-->
  <div class="row">
    <div class="col-sm-2" id="black , f-type , jaguar">

      <div class="box">
        <img src="https://via.placeholder.com/500" alt="black , f-type , jaguar" class="img-responsive">
        <!-- img alt and col id changes for every loop but are always the same-->
      </div>
      <div class="carinf">
        <h1>BLACK</h1>
        <h3>JAGUAR F-TYPE</h3>
        <h4>2016</h4>

      </div>
    </div>
    <div class="col-sm-2" id="black , f-type , peugeot">

      <div class="box">
        <img src="https://via.placeholder.com/500" alt="black , f-type , jaguar" class="img-responsive">
        <!-- img alt and col id changes for every loop but are always the same-->
      </div>
      <div class="carinf">
        <h1>BLACK</h1>
        <h3>PEUGEOT F-TYPE</h3>
        <h4>2016</h4>

      </div>
    </div>
    <div class="col-sm-2" id="black , f-type , jaguar">
      <div class="box">
        <img src="https://via.placeholder.com/500" alt="black , f-type , jaguar" class="img-responsive">
        <!-- img alt and col id changes for every loop but are always the same-->
      </div>
      <div class="carinf">
        <h1>BLACK</h1>
        <h3>JAGUAR F-TYPE</h3>
        <h4>2016</h4 </div>
      </div>
      <!--after six loops create new row-->
    </div>
    <div class="row">
      <!-- end final row -->
    </div>
    <!-- endfor -->
  </div>