鼠标点击后改变文字颜色和外边框的大小且选别的选项后前面选的恢复原样
时间: 2024-03-14 15:46:47 浏览: 18
好的,以下是一个实现方式,您可以将以下代码添加到您的HTML文件中的`<style>`标签内:
```css
/* 鼠标悬浮时改变样式 */
label:hover {
cursor: pointer;
border: 1px solid #000;
}
/* 选中时改变样式 */
input:checked + label {
color: #fff;
background-color: #000;
border: 2px solid #000;
}
/* 取消选中时恢复样式 */
input[type="radio"]:not(:checked) + label,
input[type="checkbox"]:not(:checked) + label {
color: #000;
background-color: #fff;
border: 1px solid #ccc;
}
```
这段CSS代码实现了以下几个功能:
- 鼠标悬浮时,选项周围会出现1px的黑色边框;
- 当选项被选中时,选项的文字颜色将会变为白色,背景颜色为黑色,并且周围的边框将会变粗为2px;
- 当选项被取消选中时,选项的文字颜色、背景颜色和边框将恢复为默认值。
这些样式同时适用于单选框和复选框。
相关问题
tkinter 当鼠标在按钮上方时,按钮改变颜色,离开按钮时恢复原样
可以使用`bind`方法绑定鼠标进入和离开事件,然后在事件处理函数中修改按钮的背景色。下面是一个示例代码:
```python
import tkinter as tk
root = tk.Tk()
def on_enter(event):
event.widget['bg'] = 'blue'
def on_leave(event):
event.widget['bg'] = 'SystemButtonFace'
button = tk.Button(root, text='Hello')
button.pack()
button.bind('<Enter>', on_enter)
button.bind('<Leave>', on_leave)
root.mainloop()
```
在这个例子中,当鼠标进入按钮时,会调用`on_enter`函数,将按钮的背景色改为蓝色;当鼠标离开按钮时,会调用`on_leave`函数,将按钮的背景色恢复为系统默认颜色。
Objective-C uiview点击按钮使uiview横向和全屏显示,再次点击时恢复原样
好的,你可以通过以下Objective-C代码实现该功能:
首先,在你的UIViewController中添加以下属性:
```
@property (nonatomic, assign) BOOL isFullScreen;
@property (nonatomic, strong) UITapGestureRecognizer *tapGesture;
```
然后,在你的UIViewController的viewDidLoad方法中添加如下代码:
```
self.isFullScreen = NO;
self.tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)];
[self.view addGestureRecognizer:self.tapGesture];
```
接下来,实现handleTapGesture方法:
```
- (void)handleTapGesture:(UITapGestureRecognizer *)tapGesture {
if (self.isFullScreen) {
[UIView animateWithDuration:0.3 animations:^{
self.view.transform = CGAffineTransformIdentity;
self.view.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
}];
self.isFullScreen = NO;
} else {
[UIView animateWithDuration:0.3 animations:^{
self.view.transform = CGAffineTransformMakeRotation(M_PI_2);
self.view.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.height, [UIScreen mainScreen].bounds.size.width);
}];
self.isFullScreen = YES;
}
}
```
这里我们同样使用UIView的transform属性来实现旋转,使用CGAffineTransformMakeRotation方法来创建旋转变换矩阵。不同的是,我们在全屏显示时将UIView的宽和高调换了一下,这样就能实现横向全屏显示了。
当用户点击UIView时,我们会先判断当前UIView是否已经全屏显示,如果已经全屏显示,则执行恢复原样的动画;否则,执行全屏显示的动画。
希望这个代码能够对你有所帮助!