CSS-эффект при наведении на одиночные результаты из mysql fetch

Question

CSS-эффект при наведении на одиночные результаты из mysql fetch

Я посмотрел в Интернете и не нашел ответа. Английский мой второй язык, так что я думаю, что не смотрю с хорошими словами. У меня есть поисковая система на моем веб-сайте, и я хочу иметь эффект «удара», когда я наведите курсор на результат. Проблема в том, что когда я наведу курсор на результат, он влияет на все из них одновременно.

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. Результаты должны оставаться встроенными в блок, чтобы они располагались в строках, а не друг над другом.

0

css hover mysql php

Решение

По вопросам рекламы [email protected]

Accepted Answer

Вам понадобится небольшая помощь 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>

1

Другие решения

Других решений пока нет …

Источник