CSS 对 mysql 获取的单个结果的悬停效果

Question

网上查了一下，没找到答案。英语是我的第二语言，所以我认为我没有用好词来寻找。我的网站上有一个搜索引擎，我希望在悬停结果时产生 "bump" 效果。问题是，当我悬停一个结果时，它会同时影响所有结果。

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 获取的单个结果的悬停效果

CSS hover effect on single results from mysql fetch

css

php

mysql

hover