当鼠标悬停在父div上时，同时更改图像和方向

可以通过以下步骤实现：

在HTML中，创建一个父div元素和一个图像元素，并设置它们的id属性，例如：

<div id="parentDiv">
  <img id="image" src="original_image.jpg">
</div>

使用CSS样式为父div添加悬停效果，例如改变背景颜色和光标样式：

#parentDiv {
  background-color: #ccc;
  cursor: pointer;
}

在JavaScript中，使用事件监听器来捕获鼠标悬停事件，并在事件处理程序中更改图像和方向。可以使用JavaScript的addEventListener方法来添加事件监听器，例如：

// 获取父div和图像元素
var parentDiv = document.getElementById('parentDiv');
var image = document.getElementById('image');

// 添加鼠标悬停事件监听器
parentDiv.addEventListener('mouseover', function() {
  // 更改图像源和方向
  image.src = 'new_image.jpg';
  parentDiv.style.transform = 'rotate(90deg)';
});

parentDiv.addEventListener('mouseout', function() {
  // 恢复图像源和方向
  image.src = 'original_image.jpg';
  parentDiv.style.transform = 'rotate(0deg)';
});

以上代码中，当鼠标悬停在父div上时，鼠标悬停事件将被触发，触发事件处理程序中的代码将会更改图像的源为新图像，并将父div的方向旋转90度。当鼠标移出父div时，鼠标移出事件将会触发，恢复原始图像和方向。

这个功能可以应用于各种场景，例如在网页中创建交互性的导航菜单，当鼠标悬停在导航菜单项上时，同时更改图像和指示方向，提供更直观的用户体验。

腾讯云相关产品和产品介绍链接地址方面，由于不可提及其他品牌商，建议您访问腾讯云官方网站进行查找和了解。