Для того чтобы создать визуальный эффект границы между двумя карточками, когда курсор мыши находится между ними, можно использовать CSS и немного JavaScript для отслеживания положения мыши. Ниже приведен пример, который иллюстрирует подход к реализации этого эффекта.
### HTML
```html
<div class="container">
<div class="card left-card">Карточка 1</div>
<div class="divider"></div>
<div class="card right-card">Карточка 2</div>
</div>
```
### CSS
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
display: flex;
position: relative;
}
.card {
width: 200px;
height: 300px;
background-color: #ffffff;
border: 1px solid #ccc;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
transition: transform 0.3s;
position: relative;
}
.divider {
width: 4px;
background-color: transparent;
transition: background-color 0.3s;
}
.container:hover .divider {
background-color: #3498db; /* Цвет границы при наведении мыши */
}
.container:hover .card {
transform: scale(1.05); /* Немного увеличиваем карточки при наведении */
}
```
### JavaScript (для улучшения взаимодействия)
В этом простом примере JavaScript не нужен, но если вы хотите добавлять дополнительные эффекты или функционал, вы можете использовать его для более сложных анимаций.
### Как это работает
1. **HTML** создает контейнер с двумя карточками и разделителем между ними.
2. **CSS** стилизует карточки и устанавливает эффекты при наведении:
- Когда пользователь наводит курсор на контейнер, цвет разделителя изменяется на синий, создавая эффект границы.
- При наведении карточки слегка увеличиваются, что придает визуальное ощущение динамики.
3. **Див `divider`** - это элемент, который будет служить разделителем между карточками.
Вы можете экспериментировать с цветами, размерами и эффектами для достижения желаемого результата.