Question

我在网上查了一下，但没有找到答案。英语是我的第二语言，所以我觉得我不会用好话来看。我的网站上有一个搜索引擎，当我将鼠标悬停在结果上时，我希望产生“碰撞”效果。问题是，当我悬停结果时，它会同时影响所有结果。

HTML-PHP

while ($row = mysql_fetch_assoc($getquery)) {
    $id = $row['ID'];
    $input1 = $row['name'];
    echo '<div class="foo">'; 
    echo '<div class="fooimage">'; 
    echo "<a href='details.php?id=$id'> <img alt='Image goes here' src='portal_user/submit_form/" . $row["Photos"] . "' width=190px height=140px></a>";
    echo '</div>'; 
    echo '<div class="footext">';        
    echo "<div class='input1'>";
    echo "<a href='details.php?id=$id'>$input1</a>";
    echo "</div>";
    echo "</div>";
    echo "</div>";
}

CSS

.foo {
position: relative;
height: 205px;
width: 200px;
display: inline-block;
background-color: #ececec;
margin-left: 20px;
margin-bottom: 10px;
margin-top: 0px;
box-shadow: 5px 5px 3px #888888;
transition: .7s
}

.foo:hover {
margin-bottom: 10px;
margin-top: -5px;
}

我希望在foo div上产生凹凸效果。结果需要保持内联块以使它们成行，而不是一个在另一行之上。

Answer 1

我认为你需要一些jQuery帮助。我也稍微改变了CSS，但必要时进行调整：

$( ".foo" ).hover(
  function() {
    $(this ).addClass('hover');
  }, function() {
    $( this ).removeClass('hover');
  }
);

.foo {
  position: relative;
  top: 0;
  height: 205px;
  width: 200px;
  display: inline-block;
  background-color: #ececec;
  margin-left: 20px;
  margin-bottom: 10px;
  margin-top: 0px;
  box-shadow: 5px 5px 3px #888888;
  transition: .7s
}

.foo.hover {
  position: relative;
  top: -10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="fooimage">
    <a href='details.php?id=$id'>
      <img alt='Image goes here' src='http://placehold.it/190x140' width=190px height=140px>
    </a>
  </div>
  <div class="footext">
    <div class='input1'>
      <a href='#'>$input1</a>
    </div>
  </div>
</div>

<div class="foo">
  <div class="fooimage">
    <a href='details.php?id=$id'>
      <img alt='Image goes here' src='http://placehold.it/190x140' width=190px height=140px>
    </a>
  </div>
  <div class="footext">
    <div class='input1'>
      <a href='#'>$input1</a>
    </div>
  </div>
</div>

<div class="foo">
  <div class="fooimage">
    <a href='details.php?id=$id'>
      <img alt='Image goes here' src='http://placehold.it/190x140' width=190px height=140px>
    </a>
  </div>
  <div class="footext">
    <div class='input1'>
      <a href='#'>$input1</a>
    </div>
  </div>
</div>

CSS悬停对mysql fetch

1 个答案: