鼠标悬停在哪个 bootstrap 列上？

Question

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

代码：

$(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>

将鼠标悬停在框上时，文本不会变色，将鼠标悬停在文本上时，框不会显示。

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

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

中的 if 语句来做到这一点

编辑： 尽可能地改变了 HTML 远离 django，id 需要其他部分，因此了解它们可能会有用.

编辑 2： 将 a 标记移动到列周围修复了普通 HTML、CSS 和 jQuery.但是对于 PythonAnywhere 上的 django，它不起作用。所以我现在想知道它是 PythonAnywhere 还是我的 django 代码。

Answer 1

您的 jQuery 代码存在一些问题：

1 - if 条件未根据图像 alt 内部检查列 id 它：

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

前面的代码selects 所有匹配那些条件的元素，而不仅仅是列里面的元素。因此，当您获得 alt 属性时，它采用 selection 元素中第一个元素的属性。

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

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

正如我之前提到的，前几行 select 所有符合这些条件的元素，而不仅仅是列中的元素。

3 - 尝试使用更多的 CSS 而不是使用 jQuery 的样式，它将为您节省很多时间。

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.

查看代码的变化：

$(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>

鼠标悬停在哪个 bootstrap 列上？

Which bootstrap column is the mouse hovering over?

html

django

jquery

pythonanywhere

twitter-bootstrap-3