码萌
码萌

控制父级别hover + 兄弟元素控制

改动点: 控制父级别hover + 兄弟元素控制

&:hover {
  .announcement-default-wrap{
    display: block;
    padding: 10px 23px;
    border-radius: 4px;

    .announcement-default-title-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .announcement-default-content-wrap {
      font-size: 12px;
      line-height: normal;
      letter-spacing: normal;
      margin-top: 6px;
      word-wrap:break-word;
      white-space: pre-line;
    }
  }
  }
  &:hover{
    .announcement-show-wrap{
      &.announcement-icon-title{
        display: none;
      }
    }
  }
  .announcement-edit + .announcement-default-wrap {
    display: none;
  }
  .announcement-edit + .announcement-show-wrap {
    &.announcement-icon-title{
      display: none;
    }
  }

-------------------------源码--------------------------------

import React, { useState, useRef, useEffect } from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'
import CX from 'classnames'

import CancelButton from '../CancelButton'
import SmallButton from '../SmallButton'

import './index.less'

export default function ClassroomAnnouncement(props) {
  const {
    announcement, onSendAnnouncement, style, isEditable, theme,
  } = props

  const [announcementStatus, setAnnouncementStatus] = useState('normal')

  const inputElem = useRef(null)

  useEffect(() => {
    if (announcementStatus === 'edit') {
      inputElem.current.value = announcement
    }
  }, [announcement, announcementStatus])

  const handleEditAnnouncement = () => {
    setAnnouncementStatus('edit')
  }

  const handleCancelAnnouncementEdit = () => {
    setAnnouncementStatus('normal')
  }

  const handleSaveAnnouncement = () => {
    const elem = inputElem.current
    const inputString = _.trim(elem.value)
    onSendAnnouncement(inputString)
    elem.value = ''
    setAnnouncementStatus('normal')
  }

  const showNormalAnnouncement = (
    // 学生应该判断公告是否为空
    isEditable === false ? announcement !== '' : true
  )

  return (
    

      {
        showNormalAnnouncement && announcementStatus !== 'edit' && (
        

          
          {announcement || '点击发布教室公告'}
        

        )
      }
      {
        announcementStatus === 'edit' && (
          

            

              
              编辑教室公告