鼠标悬停在哪个引导列上？

Question

我正在创建一个`django`网站，我必须更改文本的颜色，并在将鼠标悬停在其引导列上时显示一个框。我遇到的问题是尝试单独引用该列以仅突出显示该列而不是另一列。

代码：

$(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="http://placehold.it/500x500" 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="http://placehold.it/500x500" 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>

当您将鼠标悬停在框上时，文字不会显示颜色，当鼠标悬停在文本上时，框不会显示。

在jQuery中，它会查看列的ID是否与图像alt文本相同。然后，如果它们相同，则更改文本的颜色并添加框。不悬停时改变边框和文字。

我已经能够为文本着色并同时显示框，但前提是所有其他列都可以显示。您可以通过排除jQuery。

中的if语句来完成此操作

编辑：尽可能多地将HTML更改为django，ID需要其他部分，以便了解它们。

编辑2 ：将a标记移到列的周围，可以修复普通HTML，CSS和jQuery。但是django PythonAnywhere上的PythonAnywhere无效。所以我现在正在质疑它是django还是{{1}}代码。

Answer 1

jQuery代码的一些问题：

1 - if条件未检查列id对照图片alt 里面：

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

前面的代码选择 all 符合这些条件的元素，而不仅仅是列中的元素。因此，当您获得alt属性时，它会在元素选择中采用第一个元素的属性。

2 - 您正在更改所有元素的边框和文本，而不仅仅是列中的元素。当您将鼠标悬停在第二列上时，您也在执行第一列的handlerOut，因此，第一列的代码也会改变第二列的样式。

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

正如我之前提到的，前面的行选择了 all 符合这些条件的元素，而不仅仅是列中的元素。

3 - 尝试使用更多CSS代替jQuery样式，这样可以节省大量时间。

  

您的django代码会动态创建列，因此您需要在创建列后运行代码，或者使用带委派的事件来添加和删除类。

查看代码的变体：

＆＃13;

＆＃13;

$(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");
    }
  });

});

＆＃13;

.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;
}

＆＃13;

<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="http://placehold.it/500x500" 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="http://placehold.it/500x500" 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="http://placehold.it/500x500" 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>

＆＃13;

＆＃13;

＆＃13;