jQuery 通过鼠标摇拽改变div的大小

Posted 2023-03-27

鼠标移动到Div边框上，拖动可以改变Div的大小

身为一个前端人，必须告诉你的是：前端效果很多都是用表象来忽悠人的。

要做你要的效果需要作假：
①做3个用于拖动标签（右边、下边、右下角）三个，默认是空白的，根据原来的DIV定义大小和位置，绝对定位，hover上去鼠标变一下，点击鼠标可拖拽。
②拖拽的过程中实时改变原div大小并同时修改相关拖动标签的大小位置。
③拖拽可使用jQueryUI的核心库就可以了。 参考技术A 不知道啊

jquery 当鼠标移进div改变选中div样式，同时改变这个div里面的a标签样式，怎样改变？

<style>
.topicinxxxxx
.topicainyyyyy
</style>
<ul>
<li class="topic">
<h4 class="topictitle">
<a href="#" target="_blank">标题</a>
</h4>
<p class="pcss">
<a href="#" target="_blank">aaa</a>
<a href="#" target="_blank">bbb</a>
<a href="#" target="_blank">ccc</a>
<a href="#" target="_blank">ddd</a>
<a href="#" target="_blank">eee</a>

</p>
</li>
</ul>

我写了这个javascript
$('.topic').mouseenter(
function()
$(this).addClass('topicin').has('a').addClass('topicain');
).mouseleave(
function()
$(this).removeClass('topicin').has('a').removeClass('topicain');
);

但li的样式是变了，但a标签没有变

参考技术A 你要把li添加'topicin'样式类，
将li下的a标签添加'topicain'样式类?
我没理解错的话，你这里用has是不对的，has（'a'）是判断li是否包含a，如果包含的话保留，不包含的话略过，返回的对象是li而不是a。
$(this).addClass('topicin').find('a').addClass('topicain');
试试这个追问

是可以变了，但还有一个问题，我topicain的样式是这样：.topicain
background-color:#FEF1D6;
border-color:#FACEA0;
背景色变了，但边框不变，是怎么回事？

追答

border:1px solid #FACEA0;
需要同时指定边框宽度，类型，颜色

本回答被提问者和网友采纳 参考技术B 　　我尝试了很久，换了各种浏览器，确实存在这样的问题。我初步推测可能与“文本节点”、“元素节点”的不同有关，我明天有时间的话写一个js来做这个效果看行不行，jq毕竟不知道源码，遇到问题的时候用js代替。有时间的话你也可以用js写一个试试。 参考技术C 目测：a标签在p标签里面吧...